/* I&M Call brand theme – applies on all screen sizes. */
:root {
    --imc-brand: #1f4fae;
    --imc-brand-2: #3b82f6;
    --imc-navy: #0f2a5f;

    --color-background: light-dark(#eef2f8, #0d1220);
    --color-background-navbar: light-dark(var(--imc-brand), #13213f);
    --color-navbar-bottom-border: transparent;
    --color-navbar-icon: #ffffff;
    --color-compose-send-button-background: var(--imc-brand-2);
    --color-background-brand-solid-action-button: light-dark(var(--imc-brand), #2f5fc4);
    --color-background-brand-solid-action-button-hover: light-dark(var(--imc-navy), #3b6fd6);
    --color-compose-box-background: light-dark(#ffffff, #151c2c);
}

/* ---------- Phone-only pieces added by app.js: hidden everywhere by
   default; the phone (and PC design) styles turn them on. ---------- */
#imc-back,
#imc-title,
#imc-title-face,
#imc-tabbar,
.imc-compose-more,
.imc-compose-tools,
.imc-receipt,
.imc-reply-card,
.imc-panel,
.imc-sheet-backdrop,
.imc-toast {
    display: none;
}

/* ---------- Top bar: brand colour, white icons ---------- */
/* One gradient across the full-width bar. Everything inside it stays
   transparent, or wide screens show separate coloured blocks. */
#navbar-fixed-container .header {
    background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand) 55%, var(--imc-brand-2)) !important;
    box-shadow: 0 2px 12px rgb(15 42 95 / 25%);
}

#navbar-fixed-container .header-main,
#navbar-fixed-container .header-main > .column-left,
#navbar-fixed-container .header-main > .column-middle,
#navbar-fixed-container .header-main > .column-right,
#navbar-middle .column-middle-inner,
#navbar-middle .top-navbar-container,
#message_view_header {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* The organisation logo in the top bar (a white box on blue): removed */
#top_navbar .brand {
    display: none !important;
}

/* Zulip's "your time zone differs" offer: hidden everywhere (it can still
   be changed in Settings) */
[data-process="time_zone_update_offer"] {
    display: none !important;
}

#navbar-fixed-container .header .zulip-icon,
#navbar-fixed-container .header .navbar-item i,
#message_view_header,
#message_view_header a,
#message_view_header .message-header-stream-settings-button,
#message_view_header .navbar-icon,
#message_view_header .sub_count,
#message_view_header .narrow_description,
.search_icon {
    color: #ffffff !important;
}

#message_view_header .divider,
#message_view_header .narrow_description {
    opacity: 0.85;
}

/* Closed search: just a white icon on the blue bar */
#searchbox_form.navbar-search:not(.expanded),
#searchbox_form.navbar-search:not(.expanded) #searchbox-input-container {
    background: transparent !important;
    border-color: transparent !important;
}

/* Search field keeps normal colours when open */
#searchbox .search-input,
#searchbox input,
.navbar-search.expanded * {
    color: var(--color-text-search, inherit) !important;
}

/* ---------- Message list: floating rounded cards ---------- */
.recipient_row {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgb(15 42 95 / 10%), 0 4px 14px rgb(15 42 95 / 6%);
    margin-bottom: 12px;
    border: 0 !important;
}

.message-header-contents {
    border-radius: 14px 14px 0 0 !important;
}

.message_sender .sender_name,
.message_sender .sender_name-text {
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-weight: 700;
}

.message_row.selected_message .messagebox {
    box-shadow: inset 3px 0 0 var(--imc-brand-2) !important;
}

/* ---------- Left sidebar: active item in brand colour ---------- */
#left-sidebar .top_left_row.active-filter,
#left-sidebar li.active-filter > .bottom_left_row,
#left-sidebar .active-sub-filter {
    background: light-dark(rgb(31 79 174 / 12%), rgb(59 130 246 / 22%)) !important;
    border-radius: 8px;
}

/* ---------- Compose: rounded pill ---------- */
.compose_reply_button,
#compose-textarea,
.message_reply_container .compose_reply_button {
    border-radius: 22px !important;
    border: 1px solid light-dark(rgb(31 79 174 / 30%), rgb(143 180 255 / 30%)) !important;
}

/* Only the send button is a round brand button. "Start new conversation"
   and "New direct message" keep Zulip's own text-button look on PC. */
#compose-send-button {
    border-radius: 50% !important;
    background: var(--imc-brand-2) !important;
    color: #fff !important;
}

/* ---------- Buttons with brand colour ---------- */
.action-button-solid-brand,
.button.primary,
.new-style-button {
    background-color: var(--imc-brand) !important;
}

/* I&M Call – Zulip mobile/PWA tweaks.
   Served from /pwa/mobile.css and injected by nginx (sub_filter),
   so it survives Zulip upgrades. Only affects screens < 768px. */

:root {
    --imc-touch: 44px;
}

@media (max-width: 767px) and (pointer: coarse) {
    /* Message layout (chat bubbles) lives in chat.css */

    /* ---------- Top bar: fewer, bigger targets ---------- */
    #help-menu {
        display: none !important; /* still reachable from the gear menu */
    }

    .header .navbar-item,
    .header .header-button,
    #settings-dropdown,
    #personal-menu,
    #userlist-toggle-button {
        min-width: var(--imc-touch);
        min-height: var(--imc-touch);
    }

    #message_view_header {
        flex: 1 1 auto;
    }

    /* ---------- Compose: big, thumb-friendly, above the home bar ---------- */
    #compose {
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--color-compose-box-background, inherit);
        box-shadow: 0 -2px 10px rgb(0 0 0 / 8%);
    }

    .compose_reply_button,
    .compose_new_conversation_button,
    #new_conversation_button {
        min-height: var(--imc-touch);
        font-size: 16px;
        border-radius: 22px !important;
    }

    /* 16px+ stops iOS from zooming into the field on focus */
    #compose-textarea,
    .compose-textarea,
    input[type="text"],
    input[type="search"],
    textarea {
        font-size: 16px !important;
    }

    /* ---------- Sidebars ---------- */
    #left-sidebar .sidebar-topic-name,
    #left-sidebar .dm-name,
    #left-sidebar .stream-name,
    #left-sidebar .left-sidebar-navigation-label {
        line-height: 2.4;
    }

    /* ---------- Recent conversations: give names room ---------- */
    #recent_view_table .recent_topic_stream {
        max-width: 38vw;
    }

    /* ---------- Dropdowns / popovers: easy to tap ---------- */
    .popover-menu-list-item,
    .tippy-box .dropdown-list-item,
    .navigation-item {
        min-height: var(--imc-touch);
    }
}

/* Standalone PWA (installed app): respect notch / status bar */
@media (display-mode: standalone) {
    #navbar-fixed-container {
        padding-top: env(safe-area-inset-top);
    }
}

/* ---------- App feel: bottom tab bar (built by /pwa/app.js) ---------- */
#imc-tabbar {
    display: none;
}

@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile {
        --imc-tabbar-h: calc(60px + env(safe-area-inset-bottom));
        overscroll-behavior-y: none;
    }

    body {
        -webkit-tap-highlight-color: transparent;
    }

    #imc-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 105;
        height: var(--imc-tabbar-h);
        padding-bottom: env(safe-area-inset-bottom);
        /* Solid, no blur: a blur under a fixed bar is redrawn on every scroll step */
        background: light-dark(#ffffff, #131a2c);
        border-top: 1px solid light-dark(rgb(15 42 95 / 10%), rgb(255 255 255 / 8%));
        box-shadow: 0 -6px 24px rgb(15 42 95 / 8%);
    }

    .imc-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        position: relative;
        border: 0;
        background: none;
        padding: 0;
        color: light-dark(#6b7690, #8d98b3);
        font: 600 11px/1 inherit;
        cursor: pointer;
    }

    .imc-tab-icon {
        display: grid;
        place-items: center;
        width: 56px;
        height: 30px;
        border-radius: 15px;
        font-size: 20px;
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

    .imc-tab:active .imc-tab-icon {
        transform: scale(0.9);
    }

    .imc-tab.active {
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    .imc-tab.active .imc-tab-icon {
        background: light-dark(rgb(31 79 174 / 13%), rgb(143 180 255 / 16%));
    }

    .imc-tab-badge {
        position: absolute;
        top: 5px;
        left: calc(50% + 8px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #e5484d;
        color: #fff;
        font-size: 11px;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px light-dark(#fff, #131a2c);
    }

    /* Get out of the way while typing, and inside a conversation
       (like WhatsApp / Teams: the chat screen has no tab bar) */
    html.imc-keyboard-open #imc-tabbar,
    html.imc-compose-open #imc-tabbar,
    html.imc-view-conversation:not(.imc-panel-open) #imc-tabbar {
        display: none;
    }

    /* Collapsed compose bar sits on top of the tab bar */
    html.imc-mobile:not(.imc-keyboard-open, .imc-compose-open, .imc-view-conversation) #compose {
        bottom: var(--imc-tabbar-h) !important;
    }

    /* Otherwise at the bottom, lifted above the iPhone keyboard */
    html.imc-mobile.imc-compose-open #compose,
    html.imc-mobile.imc-view-conversation:not(.imc-panel-open) #compose {
        bottom: var(--imc-kb, 0px) !important;
    }

    html.imc-mobile #bottom_whitespace {
        padding-bottom: var(--imc-tabbar-h);
    }

    /* Sidebars end above the tab bar */
    html.imc-mobile .column-left.expanded #left-sidebar,
    html.imc-mobile .column-right.expanded #right-sidebar {
        padding-bottom: var(--imc-tabbar-h) !important;
    }

    /* The tab bar replaces these header buttons */
    html.imc-mobile .left-sidebar-toggle-button {
        display: none !important;
    }
}

/* ---------- App header: back button + two-line title (app.js) ---------- */
#imc-back,
#imc-title {
    display: none;
}

@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile #navbar-middle .column-middle-inner {
        display: flex;
        align-items: center;
        height: 100%;
        min-width: 0;
    }

    html.imc-mobile #imc-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 12px;
        color: #fff;
        line-height: 1.15;
    }

    html.imc-mobile:not(.imc-root-view) #imc-title {
        padding-left: 0;
    }

    .imc-title-sub {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .imc-title-main {
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.imc-mobile:not(.imc-root-view) #imc-back {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        border-radius: 50%;
    }

    html.imc-mobile #imc-back:active {
        background: rgb(255 255 255 / 18%);
    }

    /* Zulip's own one-line header is replaced by ours */
    html.imc-mobile #message_view_header {
        display: none !important;
    }

    /* Middle part reaches the right-hand buttons (gear + avatar = 88px) */
    html.imc-mobile #navbar-middle {
        width: auto !important;
        margin-right: 88px !important;
    }

    html.imc-mobile #streamlist-toggle {
        display: none !important;
    }

    /* Closed search is just an icon */
    html.imc-mobile:not(.imc-search-open) .top-navbar-container {
        flex: 0 0 44px;
        width: 44px;
        margin: 0 !important;
    }

    /* Search open: hide our title, let the search field take the bar */
    html.imc-search-open #imc-back,
    html.imc-search-open #imc-title {
        display: none !important;
    }

    html.imc-search-open .top-navbar-container {
        flex: 1 1 auto;
        margin: 0 !important;
    }

    /* Less clutter on the right: user list lives in the DM tab */
    html.imc-mobile #userlist-toggle-button {
        display: none !important;
    }

    /* ---------- Message text that reads well ---------- */
    .message_content {
        font-size: 15.5px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .message_content p {
        margin-bottom: 6px;
    }

    .message_content img,
    .message_inline_image img,
    .message_inline_image {
        max-width: 100% !important;
        height: auto;
        border-radius: 10px;
    }

    .message_content pre,
    .message_content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .message_sender .sender_name,
    .message_sender .sender_name-text {
        font-size: 15px;
    }

    .message-time {
        font-size: 12px;
        opacity: 0.7;
    }

    .messagebox {
        padding-top: 8px !important;
        padding-bottom: 6px !important;
    }

    /* Channel > topic bar above each conversation */
    .message_header .message-header-contents {
        min-height: 40px;
        font-size: 14px;
    }

    /* ---------- Recent conversations: two-line rows ---------- */
    #recent-view-content-table .recent-view-body-row > td {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #recent-view-content-table .recent-view-conversation-with-unread-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "conversation-type unread-mention-and-count" "conversation-name unread-mention-and-count" !important;
        align-items: center;
        row-gap: 2px;
    }

    #recent-view-content-table .recent-view-conversation-type-wrapper {
        font-size: 12.5px;
        opacity: 0.75;
        min-width: 0;
        overflow: hidden;
    }

    #recent-view-content-table .recent-view-channel-name {
        max-width: none !important;
    }

    #recent-view-content-table .recent-view-conversation-with-unread-wrapper > .zulip-icon-chevron-right {
        display: none;
    }

    #recent-view-content-table .recent-view-conversation-link {
        font-size: 16px;
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #recent-view-content-table .recent-view-unread-mention-and-count-wrapper {
    }

    /* Filters: chips in one swipeable row, search field full width below */
    #recent_view_filter_buttons {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    #recent_filters_group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100% !important;
    }

    #recent_filters_group > * {
        flex: 0 0 auto;
    }

    #recent-view-search-wrapper {
        width: 100% !important;
        max-width: none !important;
    }

    /* ---------- Inbox rows: easier to tap ---------- */
    #inbox-view .inbox-row,
    #inbox-view .inbox-header {
        min-height: 48px;
    }

    #inbox-view .inbox-topic-name,
    #inbox-view .inbox-dm-name {
        font-size: 15.5px;
    }
}

/* ---------- Full-screen Channels / Messages screens (app.js) ---------- */
.imc-panel,
.imc-panel[hidden] {
    display: none;
}

@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile {
        --imc-surface: light-dark(#ffffff, #141b2d);
        --imc-text: light-dark(#111827, #e8ecf4);
        --imc-muted: light-dark(#6b7280, #94a0b8);
        --imc-divider: light-dark(#eef1f6, #1f2940);
        --imc-pressed: light-dark(#f1f4fa, #1b2438);
    }

    html.imc-mobile .imc-panel:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--imc-top, 56px);
        left: 0;
        right: 0;
        bottom: var(--imc-tabbar-h);
        z-index: 104;
        background: var(--imc-surface);
        color: var(--imc-text);
        animation: imc-panel-in 0.18s ease-out;
    }

    @keyframes imc-panel-in {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    /* While a panel is open the chat underneath must not peek through */
    html.imc-panel-open #compose,
    html.imc-panel-open #scroll-to-bottom-button-container {
        display: none !important;
    }

    /* Search */
    .imc-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 16px 6px;
        padding: 0 14px;
        height: 44px;
        border-radius: 22px;
        background: light-dark(#f1f4f9, #1c2539);
        color: var(--imc-muted);
        flex: 0 0 auto;
    }

    .imc-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--imc-text);
        font-size: 16px !important;
        padding: 0;
        box-shadow: none;
    }

    .imc-search input::-webkit-search-cancel-button {
        filter: grayscale(1);
    }

    /* List */
    .imc-list {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 96px;
    }

    .imc-section-title {
        padding: 18px 20px 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--imc-muted);
    }

    .imc-row {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 72px;
        padding: 10px 16px;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        font: inherit;
        cursor: pointer;
        position: relative;
    }

    .imc-row::after {
        content: "";
        position: absolute;
        left: 78px;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--imc-divider);
    }

    .imc-row:active {
        background: var(--imc-pressed);
    }

    .imc-row-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .imc-row-title {
        font-size: 16.5px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .imc-row-subtitle {
        margin-top: 3px;
        font-size: 14.5px;
        line-height: 1.35;
        color: var(--imc-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .imc-has-unread .imc-row-title {
        font-weight: 800;
    }

    .imc-has-unread .imc-row-subtitle {
        color: var(--imc-text);
        font-weight: 500;
    }

    .imc-row-meta {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        align-self: stretch;
        justify-content: center;
    }

    .imc-time {
        font-size: 12.5px;
        color: var(--imc-muted);
    }

    .imc-has-unread .imc-time {
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-weight: 700;
    }

    .imc-unread {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 11px;
        background: light-dark(var(--imc-brand), #3b82f6);
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 22px;
        text-align: center;
    }

    .imc-muted {
        opacity: 0.55;
    }

    .imc-muted .imc-unread {
        background: var(--imc-muted);
    }

    /* Avatars */
    .imc-avatar {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        position: relative;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.02em;
        background: light-dark(#dbe3f1, #263049);
    }

    .imc-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .imc-avatar-group {
        background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand-2));
        font-size: 22px;
    }

    .imc-online {
        position: absolute;
        right: 1px;
        bottom: 1px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 2.5px var(--imc-surface);
    }

    /* Channel icon: rounded square in the channel's own colour */
    .imc-channel-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 21px;
        color: var(--imc-channel-color);
        background: color-mix(in srgb, var(--imc-channel-color) 16%, transparent);
    }

    /* Loading placeholders */
    .imc-skeleton .imc-avatar,
    .imc-skeleton .imc-row-body {
        background: linear-gradient(90deg, var(--imc-divider) 25%, var(--imc-pressed) 50%, var(--imc-divider) 75%);
        background-size: 200% 100%;
        animation: imc-shimmer 1.2s infinite linear;
    }

    .imc-skeleton .imc-row-body {
        height: 34px;
        border-radius: 8px;
    }

    @keyframes imc-shimmer {
        to {
            background-position: -200% 0;
        }
    }

    .imc-empty {
        padding: 48px 32px;
        text-align: center;
        color: var(--imc-muted);
        font-size: 15px;
        line-height: 1.5;
    }

    .imc-empty-search[hidden],
    .imc-row[hidden],
    .imc-section[hidden] {
        display: none !important;
    }

    .imc-wide-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 20px 16px;
        width: calc(100% - 32px);
        height: 48px;
        border: 1.5px solid light-dark(rgb(31 79 174 / 25%), rgb(143 180 255 / 25%));
        border-radius: 14px;
        background: transparent;
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-size: 15.5px;
        font-weight: 600;
    }

    /* New message button */
    .imc-fab {
        position: absolute;
        right: 18px;
        bottom: 18px;
        width: 58px;
        height: 58px;
        border: 0;
        border-radius: 18px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
        color: #fff;
        font-size: 24px;
        box-shadow: 0 8px 22px rgb(31 79 174 / 35%);
    }

    .imc-fab:active {
        transform: scale(0.94);
    }
}

/* ---------- Inside a conversation: chat bubbles like a messaging app ----------
   Own messages are marked data-imc-mine by app.js. */

@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile {
        --imc-chat-bg: light-dark(#e8edf5, #0b101c);
        --imc-bubble-in: light-dark(#ffffff, #1c2539);
        --imc-bubble-in-text: light-dark(#111827, #e8ecf4);
        --imc-bubble-out: light-dark(#1f4fae, #2a56b8);
        --imc-bubble-out-text: #ffffff;
        --color-background: var(--imc-chat-bg);
    }

    /* ----- Blocks: no white cards, just the chat background ----- */
    html.imc-mobile .recipient_row {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        margin-bottom: 6px !important;
    }

    html.imc-mobile .message_row {
        background: transparent !important;
        grid-template-columns: 0 minmax(0, 1fr) !important;
        border: 0 !important;
    }

    html.imc-mobile .unread_marker {
        display: none !important;
    }

    html.imc-mobile .messagebox,
    html.imc-mobile .message_row.selected_message .messagebox {
        padding: 1px 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        outline: 0 !important;
    }

    /* ----- The bubble ----- */
    html.imc-mobile .messagebox-content {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        grid-template-areas:
            "sender sender"
            "message message"
            "more more"
            "reactions reactions"
            "reminders reminders"
            "controls time" !important;
        column-gap: 10px;
        width: fit-content;
        min-width: 92px;
        max-width: 82%;
        margin: 0 0 0 40px !important;
        padding: 7px 12px 5px !important;
        border-radius: 18px;
        background: var(--imc-bubble-in);
        color: var(--imc-bubble-in-text);
        box-shadow: 0 1px 1.5px rgb(15 42 95 / 10%);
    }

    /* First message of a run: a little gap above and a "tail" corner */
    html.imc-mobile .messagebox-includes-sender {
        margin-top: 8px;
    }

    html.imc-mobile .messagebox-includes-sender .messagebox-content {
        border-top-left-radius: 6px;
    }

    /* Avatar sits outside the bubble, to the left */
    html.imc-mobile .message-avatar {
        grid-area: auto !important;
        position: absolute !important;
        left: -40px;
        top: 0;
        width: 32px !important;
        height: 32px !important;
    }

    html.imc-mobile .message-avatar img,
    html.imc-mobile .message-avatar .inline_profile_picture {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }

    html.imc-mobile .message_sender {
        grid-area: sender !important;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 2px;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    html.imc-mobile .message_sender .sender_name,
    html.imc-mobile .message_sender .sender_name-text,
    html.imc-mobile .message_sender .user-name {
        color: inherit !important;
        font-size: inherit !important;
    }

    html.imc-mobile .messagebox-content .message_content {
        grid-area: message !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 15.5px !important;
        line-height: 1.45 !important;
        color: inherit;
        min-width: 0;
    }

    html.imc-mobile .message_content p:last-child {
        margin-bottom: 0;
    }

    html.imc-mobile .messagebox-content .message-time {
        grid-area: time !important;
        position: static !important;
        display: block !important;
        justify-self: end;
        align-self: end;
        margin-top: 2px;
        padding: 0 !important;
        background: none !important;
        font-size: 11px !important;
        line-height: 1.4;
        opacity: 0.65;
        color: inherit !important;
        white-space: nowrap;
    }

    /* Actions (edit, star, menu) only on the tapped message */
    html.imc-mobile .messagebox-content .message_controls {
        grid-area: controls !important;
        position: static !important;
        display: none !important;
        align-self: end;
    }

    html.imc-mobile .selected_message .messagebox-content .message_controls {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        gap: 4px;
    }

    html.imc-mobile .message_controls .message-controls-icon {
        color: inherit !important;
        opacity: 0.7;
    }

    html.imc-mobile .message_reactions {
        grid-area: reactions !important;
        margin-top: 4px;
    }

    /* Tapped message: soft ring instead of Zulip's outline */
    html.imc-mobile .selected_message .messagebox-content {
        box-shadow:
            0 0 0 2px light-dark(rgb(59 130 246 / 35%), rgb(143 180 255 / 35%)),
            0 1px 1.5px rgb(15 42 95 / 10%);
    }

    /* ----- My messages: right side, brand blue, no avatar or name ----- */
    html.imc-mobile [data-imc-mine] .messagebox-content {
        margin-left: auto !important;
        margin-right: 0 !important;
        background: var(--imc-bubble-out);
        color: var(--imc-bubble-out-text);
        border-top-left-radius: 18px;
    }

    html.imc-mobile [data-imc-mine].messagebox-includes-sender .messagebox-content {
        border-top-right-radius: 6px;
    }

    html.imc-mobile [data-imc-mine] .message-avatar,
    html.imc-mobile [data-imc-mine] .message_sender {
        display: none !important;
    }

    html.imc-mobile [data-imc-mine] .message_content a {
        color: #dbe8ff !important;
        text-decoration: underline;
    }

    html.imc-mobile [data-imc-mine] .message_content code,
    html.imc-mobile [data-imc-mine] .message_content pre,
    html.imc-mobile [data-imc-mine] .message_content blockquote {
        background: rgb(255 255 255 / 15%) !important;
        color: #fff !important;
        border-color: rgb(255 255 255 / 40%) !important;
    }

    html.imc-mobile [data-imc-mine] .user-mention {
        background: rgb(255 255 255 / 20%) !important;
        color: #fff !important;
    }

    html.imc-mobile [data-imc-mine] .message_reactions .message_reaction {
        background: rgb(255 255 255 / 18%) !important;
        color: #fff !important;
        border-color: transparent !important;
    }

    /* One-on-one chat: the header already says who it is */
    html.imc-view-dm1 .message-avatar,
    html.imc-view-dm1 .message_sender {
        display: none !important;
    }

    html.imc-view-dm1 .messagebox-content {
        margin-left: 0 !important;
    }

    /* ----- Block header inside a conversation: just a centred date ----- */
    html.imc-view-conversation .message_header {
        display: flex !important;
        justify-content: center;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 10px 0 4px !important;
    }

    html.imc-view-conversation .message_header .message-header-contents {
        display: inline-flex !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 4px 12px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: light-dark(rgb(255 255 255 / 90%), rgb(28 37 57 / 90%)) !important;
        box-shadow: 0 1px 2px rgb(15 42 95 / 10%);
    }

    html.imc-view-conversation .message-header-contents > :not(.recipient_row_date) {
        display: none !important;
    }

    html.imc-view-conversation .recipient_row_date {
        display: inline !important;
        font-size: 12px !important;
        font-weight: 600;
        color: light-dark(#4b5563, #a6b0c6) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Day change inside a block: same centred pill */
    html.imc-mobile .message_feed_divider {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: center;
        margin: 12px 0 6px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    html.imc-mobile .message_feed_divider::before,
    html.imc-mobile .message_feed_divider::after,
    html.imc-mobile .date-divider-content::before,
    html.imc-mobile .date-divider-content::after {
        display: none !important;
    }

    html.imc-mobile .date-divider-content {
        display: inline-block !important;
        margin: 0 !important;
        padding: 4px 12px !important;
        border-radius: 12px;
        background: light-dark(rgb(255 255 255 / 90%), rgb(28 37 57 / 90%)) !important;
        box-shadow: 0 1px 2px rgb(15 42 95 / 10%);
        font-size: 12px !important;
        font-weight: 600;
        color: light-dark(#4b5563, #a6b0c6) !important;
    }

    /* ----- Typing bar ----- */
    html.imc-mobile #compose {
        background: light-dark(#ffffff, #141b2d) !important;
        box-shadow: 0 -2px 12px rgb(15 42 95 / 8%) !important;
        border-top: 1px solid light-dark(rgb(15 42 95 / 6%), rgb(255 255 255 / 6%));
    }

    html.imc-mobile #compose-content {
        padding: 8px 10px !important;
        background: transparent !important;
        border: 0 !important;
    }

    html.imc-mobile .compose_reply_button {
        height: 44px;
        padding: 0 18px !important;
        text-align: left;
        color: light-dark(#6b7280, #94a0b8) !important;
        background: light-dark(#f1f4f9, #1c2539) !important;
        border: 0 !important;
    }

    /* Inside a conversation the recipient is obvious: hide the picker row */
    html.imc-view-conversation #compose-recipient,
    html.imc-view-conversation #compose_select_recipient_widget_wrapper {
        display: none !important;
    }

    html.imc-mobile #send_later {
        display: none !important;
    }

    html.imc-mobile #message-content-container {
        display: flex !important;
        align-items: flex-end;
        gap: 8px;
        border: 0 !important;
        background: transparent !important;
    }

    html.imc-mobile #compose-textarea {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        min-height: 44px !important;
        max-height: 40vh;
        padding: 11px 16px !important;
        border-radius: 22px !important;
        border: 0 !important;
        background: light-dark(#f1f4f9, #1c2539) !important;
        line-height: 1.4 !important;
    }

    html.imc-mobile #message-send-controls-container {
        flex: 0 0 44px;
        width: 44px !important;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
    }

    html.imc-mobile #compose-send-button {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2)) !important;
        color: #fff !important;
        font-size: 18px;
        box-shadow: 0 3px 10px rgb(31 79 174 / 35%);
    }

    html.imc-mobile #message-formatting-controls-container {
        margin-top: 4px;
        opacity: 0.85;
    }

    /* "Jump to latest" button */
    html.imc-mobile #scroll-to-bottom-button {
        border-radius: 50% !important;
        background: var(--imc-bubble-in) !important;
        box-shadow: 0 3px 12px rgb(15 42 95 / 20%) !important;
        color: light-dark(var(--imc-brand), #8fb4ff) !important;
    }
}

/* ---------- New chat, channel topics and "More" screens (app.js) ---------- */

@media (max-width: 767px) and (pointer: coarse) {
    /* Settings, drafts etc. are full-screen: no tab bar on top of them */
    html.imc-overlay #imc-tabbar,
    html.imc-overlay .imc-panel {
        display: none !important;
    }

    /* Header: "More" replaces the gear and avatar buttons */
    html.imc-mobile #navbar-fixed-container .column-right {
        display: none !important;
    }

    html.imc-mobile #navbar-middle {
        margin-right: 0 !important;
    }

    #imc-panel-more .imc-search {
        display: none !important;
    }

    /* ----- Rows with an icon tile (actions, menu items) ----- */
    .imc-action-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 20px;
        color: light-dark(var(--imc-brand), #8fb4ff);
        background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 12%));
    }

    .imc-action-row {
        min-height: 64px;
    }

    .imc-action-row .imc-unread {
        margin-left: auto;
    }

    .imc-danger .imc-action-icon {
        color: #dc2626;
        background: rgb(220 38 38 / 10%);
    }

    .imc-danger .imc-row-title {
        color: #dc2626;
    }

    .imc-italic {
        font-style: italic;
    }

    .imc-wrap {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .imc-online-text {
        color: #16a34a !important;
        font-weight: 600;
    }

    .imc-avatar-sm {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .imc-avatar-lg {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        font-size: 23px;
    }

    .imc-avatar-lg .imc-online {
        width: 16px;
        height: 16px;
    }

    /* ----- New chat: selection circles in group mode ----- */
    .imc-check {
        display: none;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 2px solid light-dark(#c5cdd9, #3a4560);
        place-items: center;
        font-size: 14px;
        color: transparent;
    }

    .imc-group-mode .imc-person .imc-check {
        display: grid;
    }

    .imc-person.imc-selected .imc-check {
        border-color: transparent;
        background: light-dark(var(--imc-brand), #3b82f6);
        color: #fff;
    }

    .imc-person.imc-selected {
        background: light-dark(rgb(31 79 174 / 6%), rgb(143 180 255 / 8%));
    }

    .imc-start-bar:not([hidden]) {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 16px;
        background: var(--imc-surface);
        box-shadow: 0 -6px 18px rgb(15 42 95 / 8%);
    }

    .imc-start-button {
        width: 100%;
        height: 50px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

    .imc-start-button:disabled {
        background: light-dark(#e3e8f0, #263049);
        color: var(--imc-muted);
    }

    /* ----- Channel screen header ----- */
    .imc-channel-head {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 16px 8px;
    }

    .imc-channel-icon-lg {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: 26px;
    }

    .imc-channel-head-name {
        font-size: 20px;
        font-weight: 800;
        line-height: 1.25;
    }

    .imc-head-actions {
        display: flex;
        gap: 10px;
        padding: 8px 16px 4px;
    }

    .imc-pill-button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 44px;
        border-radius: 12px;
        border: 1.5px solid light-dark(rgb(31 79 174 / 25%), rgb(143 180 255 / 25%));
        background: transparent;
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-size: 15px;
        font-weight: 700;
    }

    .imc-pill-button.imc-primary {
        border-color: transparent;
        background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
        color: #fff;
        box-shadow: 0 4px 12px rgb(31 79 174 / 25%);
    }

    .imc-pill-button:active {
        transform: scale(0.97);
    }

    /* ----- "More": profile card ----- */
    .imc-profile {
        display: flex;
        align-items: center;
        gap: 16px;
        width: calc(100% - 32px);
        margin: 16px;
        padding: 18px;
        border: 0;
        border-radius: 18px;
        text-align: left;
        color: #fff;
        background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand) 60%, var(--imc-brand-2));
        box-shadow: 0 8px 22px rgb(15 42 95 / 25%);
    }

    .imc-profile .imc-row-subtitle {
        color: rgb(255 255 255 / 80%);
    }

    .imc-profile .imc-avatar {
        box-shadow: 0 0 0 3px rgb(255 255 255 / 35%);
    }

    .imc-profile .imc-online {
        box-shadow: 0 0 0 2.5px var(--imc-brand);
    }

    .imc-profile-name {
        font-size: 19px;
        font-weight: 800;
    }

    .imc-profile-status {
        margin-top: 4px;
        font-size: 13px;
        color: #bbf7d0 !important;
    }
}

/* ---------- Typing bar like WhatsApp / Teams ----------
   [+]  [ message ............ (emoji) (clip) ]  (send)
   The + opens Zulip's full toolbar (formatting, video call, poll...). */

@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile #compose {
        padding-bottom: env(safe-area-inset-bottom) !important;
        transition: bottom 0.12s ease-out;
    }

    html.imc-mobile #compose-content {
        padding: 6px 8px !important;
    }

    /* Inside a conversation there is nothing to pick: one clean bar */
    html.imc-view-conversation #compose_top,
    html.imc-view-conversation #compose_close,
    html.imc-view-conversation #new_conversation_button,
    html.imc-view-conversation #new_direct_message_button,
    html.imc-mobile .composebox-buttons {
        display: none !important;
    }

    html.imc-view-conversation .compose_reply_button,
    html.imc-view-conversation #left_bar_compose_reply_button_big {
        flex: 1 1 auto;
        width: 100% !important;
        max-width: none !important;
        height: 46px !important;
        border-radius: 23px !important;
        font-size: 16px !important;
    }

    /* Collapsed bar: a single pill that already looks like the input */
    html.imc-mobile #compose .reply_button_container,
    html.imc-mobile #compose-buttons,
    html.imc-mobile .compose_buttons {
        gap: 8px;
    }

    /* No big empty area under the last message: just room for the bar */
    html.imc-mobile #bottom_whitespace {
        height: calc(var(--imc-compose-h, 64px) + var(--imc-tabbar-h) + 12px) !important;
        padding-bottom: 0 !important;
    }

    html.imc-mobile.imc-view-conversation #bottom_whitespace {
        height: calc(var(--imc-compose-h, 64px) + 12px) !important;
    }

    /* Zulip reserves 75px here for a banner that is almost never shown */
    html.imc-mobile #mark_read_on_scroll_state_banner_place_holder {
        display: none !important;
    }

    html.imc-mobile #compose .messagebox,
    html.imc-mobile #compose .compose_table,
    html.imc-mobile #send_message_form {
        height: auto !important;
    }

    /* Expanded: row = [+] [field] [send] */
    html.imc-mobile #send_message_form {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
    }

    html.imc-mobile .messagebox-wrapper,
    html.imc-mobile #compose .messagebox {
        display: flex !important;
        align-items: flex-end;
        gap: 8px;
        width: 100%;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html.imc-mobile #compose .messagebox {
        flex-wrap: wrap;
    }

    html.imc-mobile #message-content-container {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: flex-end;
        gap: 6px;
        grid-template-columns: none !important;
    }

    html.imc-mobile #compose-textarea {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 12px 82px 12px 16px !important;
        min-height: 46px !important;
        max-height: 34vh !important;
        border-radius: 23px !important;
        font-size: 16px !important;
        line-height: 22px !important;
        resize: none !important;
        box-shadow: inset 0 0 0 1px light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 6%));
    }

    html.imc-mobile #compose-textarea::placeholder {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.imc-mobile #compose-textarea:focus {
        box-shadow: inset 0 0 0 1.5px light-dark(rgb(31 79 174 / 45%), rgb(143 180 255 / 45%)) !important;
        outline: 0 !important;
    }

    /* + button on the left */
    .imc-compose-more {
        display: none;
    }

    html.imc-mobile .imc-compose-more {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin-bottom: 3px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-size: 20px;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    html.imc-tools-open .imc-compose-more {
        transform: rotate(45deg);
        background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 14%));
    }

    /* Emoji + attach inside the field, on the right */
    .imc-compose-tools {
        display: none;
    }

    html.imc-mobile .imc-compose-tools {
        position: absolute;
        right: 6px;
        bottom: 5px;
        display: flex;
        gap: 2px;
    }

    html.imc-mobile .imc-compose-btn {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: light-dark(#6b7280, #94a0b8);
        font-size: 19px;
    }

    html.imc-mobile .imc-compose-btn:active,
    html.imc-mobile .imc-compose-more:active {
        background: light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 10%));
    }

    /* Send: round, brand colour, right of the field */
    html.imc-mobile #message-send-controls-container {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        align-self: flex-end;
    }

    html.imc-mobile #compose-send-button {
        width: 46px !important;
        height: 46px !important;
        font-size: 19px !important;
    }

    html.imc-mobile #compose-send-button:active {
        transform: scale(0.92);
    }

    /* Zulip's full toolbar only after tapping + */
    html.imc-mobile #message-formatting-controls-container {
        display: none !important;
    }

    html.imc-mobile.imc-tools-open #message-formatting-controls-container {
        display: grid !important;
        order: 5;
        flex: 1 0 100%;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 6px 4px !important;
        border-radius: 14px;
        background: light-dark(#f1f4f9, #1c2539);
        opacity: 1 !important;
    }

    /* Header: small avatar of the person you're chatting with */
    #imc-title-face {
        display: none;
    }

    html.imc-mobile #imc-title-face:not([hidden]) {
        display: block;
        flex: 0 0 auto;
        margin-right: 10px;
    }

    .imc-avatar-xs {
        flex-basis: 36px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
        box-shadow: 0 0 0 2px rgb(255 255 255 / 35%);
    }

    .imc-avatar-xs .imc-online {
        width: 11px;
        height: 11px;
        box-shadow: 0 0 0 2px var(--imc-brand) !important;
    }
}

/* ---------- Long-press action sheet, toasts, swipe-to-reply (app.js) ---------- */

.imc-sheet-backdrop[hidden],
.imc-toast {
    display: none;
}

@media (max-width: 767px) and (pointer: coarse) {
    /* Zulip's tiny hover buttons are replaced by the long-press sheet */
    html.imc-mobile .messagebox-content .message_controls,
    html.imc-mobile .selected_message .messagebox-content .message_controls {
        display: none !important;
    }

    /* No text-selection popup when holding a bubble */
    html.imc-mobile .messagebox-content {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    html.imc-mobile .message_row.imc-pressed .messagebox-content {
        transform: scale(0.97);
        transition: transform 0.15s ease;
        box-shadow: 0 0 0 3px light-dark(rgb(59 130 246 / 30%), rgb(143 180 255 / 30%));
    }

    /* Swipe right: a reply arrow fades in behind the bubble */
    html.imc-mobile .message_row .messagebox {
        position: relative;
    }

    html.imc-mobile .message_row .messagebox::before {
        content: "\21A9";
        position: absolute;
        left: 14px;
        top: 50%;
        width: 32px;
        height: 32px;
        margin-top: -16px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: light-dark(rgb(31 79 174 / 12%), rgb(143 180 255 / 16%));
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-size: 17px;
        font-weight: 700;
        opacity: var(--imc-swipe, 0);
        transform: scale(calc(0.6 + var(--imc-swipe, 0) * 0.4));
        pointer-events: none;
    }

    /* Bottom sheet */
    html.imc-mobile .imc-sheet-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgb(8 14 30 / 0%);
        transition: background-color 0.2s ease;
    }

    html.imc-mobile .imc-sheet-backdrop.imc-open {
        background: rgb(8 14 30 / 45%);
    }

    .imc-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        background: var(--imc-surface, #fff);
        color: var(--imc-text, #111827);
        box-shadow: 0 -10px 30px rgb(8 14 30 / 25%);
        transform: translateY(100%);
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .imc-open .imc-sheet {
        transform: translateY(0);
    }

    .imc-sheet-handle {
        width: 40px;
        height: 5px;
        margin: 2px auto 12px;
        border-radius: 3px;
        background: light-dark(#d5dbe5, #3a4560);
    }

    .imc-sheet-reactions {
        display: flex;
        justify-content: space-between;
        padding: 6px 6px 14px;
        border-bottom: 1px solid var(--imc-divider, #eef1f6);
    }

    .imc-sheet-reaction {
        width: 50px;
        height: 50px;
        border: 0;
        border-radius: 50%;
        background: light-dark(#f1f4f9, #1c2539);
        font-size: 26px;
        line-height: 1;
        transition: transform 0.12s ease;
    }

    .imc-sheet-reaction:active {
        transform: scale(1.25);
    }

    .imc-sheet-reaction.imc-reacted {
        background: light-dark(rgb(31 79 174 / 16%), rgb(143 180 255 / 22%));
        box-shadow: inset 0 0 0 2px light-dark(var(--imc-brand), #8fb4ff);
    }

    .imc-sheet-actions {
        display: flex;
        flex-direction: column;
        padding-top: 6px;
    }

    .imc-sheet-action {
        display: flex;
        align-items: center;
        gap: 16px;
        height: 52px;
        padding: 0 10px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: inherit;
        font-size: 16.5px;
        font-weight: 500;
        text-align: left;
    }

    .imc-sheet-action .zulip-icon {
        width: 24px;
        font-size: 20px;
        color: light-dark(var(--imc-brand), #8fb4ff);
        text-align: center;
    }

    .imc-sheet-action:active {
        background: var(--imc-pressed, #f1f4fa);
    }

    .imc-sheet-action.imc-danger,
    .imc-sheet-action.imc-danger .zulip-icon {
        color: #dc2626;
    }

    /* Toast */
    html.imc-mobile .imc-toast {
        display: block;
        position: fixed;
        left: 50%;
        bottom: calc(var(--imc-compose-h, 60px) + 24px);
        z-index: 1001;
        padding: 10px 18px;
        border-radius: 20px;
        background: rgb(17 24 39 / 92%);
        color: #fff;
        font-size: 14.5px;
        font-weight: 600;
        transform: translate(-50%, 12px);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
    }

    html.imc-mobile .imc-toast.imc-toast-in {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    /* "Replying to ..." card above the typing bar */
    html.imc-mobile .imc-reply-card:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 2px 2px 4px;
        padding: 8px 6px 8px 0;
        border-radius: 12px;
        background: light-dark(#f1f4f9, #1c2539);
        overflow: hidden;
        animation: imc-reply-in 0.16s ease-out;
    }

    @keyframes imc-reply-in {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    .imc-reply-accent {
        align-self: stretch;
        flex: 0 0 4px;
        border-radius: 0 3px 3px 0;
        background: light-dark(var(--imc-brand), #8fb4ff);
    }

    .imc-reply-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .imc-reply-name {
        font-size: 13.5px;
        font-weight: 700;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    .imc-reply-snippet {
        margin-top: 1px;
        font-size: 14px;
        color: var(--imc-muted, #6b7280);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .imc-reply-close {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--imc-muted, #6b7280);
        font-size: 15px;
    }

    .imc-reply-card[hidden] {
        display: none !important;
    }

    /* A sent reply inside a bubble: compact quote box, like WhatsApp */
    html.imc-mobile .message_content blockquote {
        margin: 4px 0 6px !important;
        padding: 6px 10px !important;
        border: 0 !important;
        border-left: 3px solid light-dark(var(--imc-brand), #8fb4ff) !important;
        border-radius: 8px;
        background: light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 10%));
        font-size: 14px;
        line-height: 1.4;
        max-height: 6.2em;
        overflow: hidden;
        opacity: 0.9;
    }

    html.imc-mobile .message_content blockquote p {
        margin: 0 !important;
    }

    /* "Name said:" line above the quote: small, like a label */
    html.imc-mobile .message_content p:has(+ blockquote) {
        margin-bottom: 0 !important;
        font-size: 12.5px;
        font-weight: 700;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    html.imc-mobile .message_content p:has(+ blockquote) a,
    html.imc-mobile .message_content p:has(+ blockquote) .user-mention {
        color: inherit !important;
        background: none !important;
        padding: 0 !important;
        text-decoration: none !important;
        font-weight: inherit;
    }

    html.imc-mobile [data-imc-mine] .message_content blockquote {
        border-left-color: rgb(255 255 255 / 75%) !important;
        background: rgb(255 255 255 / 14%) !important;
    }

    html.imc-mobile [data-imc-mine] .message_content p:has(+ blockquote) {
        color: rgb(255 255 255 / 85%);
    }

    /* Away (app open, not in use): yellow instead of green */
    .imc-online.imc-away {
        background: #f59e0b !important;
    }

    /* Header status: green "Online" / "typing..." */
    html.imc-mobile .imc-title-sub.imc-sub-live {
        color: #bbf7d0;
        opacity: 1;
    }

    /* In one-on-one chats "typing..." is shown in the header instead */
    html.imc-view-dm1 #typing_notifications {
        display: none !important;
    }
}

/* ---------- Everyday helpers: filters, swipe, pull-to-refresh, offline ---------- */

.imc-offline[hidden],
.imc-ptr,
.imc-chips {
    display: none;
}

@media (max-width: 767px) and (pointer: coarse) {
    /* Zulip's "your time zone differs" offer takes ~100px on every screen */
    html.imc-mobile [data-process="time_zone_update_offer"] {
        display: none !important;
    }

    /* Room for three buttons (emoji, camera, attach) inside the field */
    html.imc-mobile #compose-textarea {
        padding-right: 118px !important;
    }

    /* ----- Chat filters ----- */
    html.imc-mobile .imc-chips {
        display: flex;
        gap: 8px;
        padding: 4px 16px 8px;
        flex: 0 0 auto;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .imc-chip {
        flex: 0 0 auto;
        height: 34px;
        padding: 0 16px;
        border: 0;
        border-radius: 17px;
        background: light-dark(#eef2f8, #1c2539);
        color: light-dark(#374151, #c3cbe0);
        font-size: 14.5px;
        font-weight: 600;
    }

    .imc-chip.imc-chip-on {
        background: light-dark(rgb(31 79 174 / 14%), rgb(143 180 255 / 20%));
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    /* ----- Swipe left on a chat ----- */
    .imc-swipe-wrap {
        position: relative;
        overflow: hidden;
    }

    .imc-swipe-wrap[hidden] {
        display: none !important;
    }

    .imc-swipe-wrap > .imc-row {
        position: relative;
        z-index: 1;
        background: var(--imc-surface, #fff);
    }

    .imc-swipe-action {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding-right: 22px;
        background: light-dark(#93a5c8, #3a4a6e);
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        transition: background-color 0.15s ease;
    }

    .imc-swipe-action .zulip-icon {
        font-size: 19px;
    }

    .imc-swipe-armed .imc-swipe-action {
        background: light-dark(var(--imc-brand), #2f5fc4);
    }

    /* ----- Pull to refresh ----- */
    html.imc-mobile .imc-ptr {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        height: 0;
        opacity: 0;
        overflow: hidden;
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-size: 20px;
        transition: height 0.2s ease, opacity 0.2s ease;
    }

    .imc-ptr.imc-ptr-busy {
        height: 48px !important;
        opacity: 1 !important;
    }

    .imc-ptr.imc-ptr-busy .zulip-icon {
        animation: imc-spin 0.8s linear infinite;
    }

    @keyframes imc-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ----- Channel list: "Topic · Name: message" ----- */
    .imc-sub-topic {
        font-weight: 700;
        color: light-dark(#374151, #c3cbe0);
    }

    .imc-has-unread .imc-sub-topic {
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    /* ----- Pinned chat ----- */
    .imc-pin {
        font-size: 13px;
        color: light-dark(#f59e0b, #fbbf24);
        line-height: 1;
    }

    /* ----- "Seen" under your last message ----- */
    html.imc-mobile .imc-receipt {
        display: block;
        grid-row: 20; /* after the bubble, not above it */
        grid-column: 1 / -1;
        justify-self: end;
        margin: 2px 14px 4px 0;
        font-size: 12px;
        font-weight: 600;
        color: light-dark(#6b7280, #94a0b8);
    }

    html.imc-mobile .imc-receipt.imc-seen {
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    /* ----- "New messages" divider ----- */
    html.imc-mobile .message_row[data-imc-first-unread]::before {
        content: "New messages";
        grid-column: 1 / -1;
        display: block;
        margin: 10px auto 8px;
        padding: 4px 14px;
        border-radius: 12px;
        background: light-dark(var(--imc-brand), #2f5fc4);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        width: max-content;
        box-shadow: 0 2px 8px rgb(31 79 174 / 25%);
    }

    /* ----- Header is tappable (profile / topics) ----- */
    html.imc-view-conversation #imc-title,
    html.imc-view-conversation #imc-title-face {
        cursor: pointer;
    }

    html.imc-view-conversation #imc-title:active {
        opacity: 0.7;
    }

    /* ----- Sheet title and profile header ----- */
    .imc-sheet-title {
        width: 100%;
        padding: 2px 6px;
        font-size: 16px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .imc-sheet-profile {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 0 4px;
    }

    .imc-sheet-profile .imc-row-subtitle {
        white-space: normal;
    }

    /* ----- No connection ----- */
    html.imc-mobile .imc-offline:not([hidden]) {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(var(--imc-top, 56px) + 8px);
        z-index: 1002;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 12px;
        background: #b91c1c;
        color: #fff;
        font-size: 14.5px;
        font-weight: 600;
        box-shadow: 0 6px 18px rgb(185 28 28 / 30%);
    }
}

/* ---------- Talking in channels: names, mentions, topic chips, members ---------- */

@media (max-width: 767px) and (pointer: coarse) {
    /* Each sender's name in their own colour, like WhatsApp groups */
    html.imc-mobile .message_row:not([data-imc-mine]) .message_sender {
        color: light-dark(var(--imc-name, var(--imc-brand)), var(--imc-name-dark, #8fb4ff)) !important;
    }

    /* Mentions of you stand out */
    html.imc-mobile .message_content .user-mention:not(.silent),
    html.imc-mobile .message_content .user-group-mention {
        padding: 0 4px;
        border-radius: 6px;
        background: light-dark(rgb(31 79 174 / 12%), rgb(143 180 255 / 18%)) !important;
        color: light-dark(var(--imc-brand), #8fb4ff) !important;
        font-weight: 600;
    }

    html.imc-mobile .message_row.mention .messagebox-content,
    html.imc-mobile .message_row.has_mention .messagebox-content {
        box-shadow: inset 3px 0 0 #f59e0b, 0 1px 1.5px rgb(15 42 95 / 10%);
    }

    /* @ / emoji / name suggestions: big rows you can tap */
    html.imc-mobile .typeahead.dropdown-menu {
        max-width: calc(100vw - 16px) !important;
        min-width: 260px;
        max-height: 42vh !important;
        overflow-y: auto !important;
        padding: 6px 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgb(8 14 30 / 25%) !important;
        background: var(--imc-surface, #fff) !important;
    }

    html.imc-mobile .typeahead.dropdown-menu li > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 6px 14px !important;
        font-size: 15.5px !important;
        white-space: nowrap;
    }

    html.imc-mobile .typeahead.dropdown-menu li.active > a {
        background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 14%)) !important;
        color: inherit !important;
    }

    html.imc-mobile .typeahead.dropdown-menu .typeahead-image {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }

    /* Room for four buttons (@, emoji, camera, attach) inside the field */
    html.imc-mobile #compose-textarea {
        padding-right: 152px !important;
    }

    html.imc-mobile .imc-compose-btn {
        width: 34px;
    }

    /* While typing: only emoji + attach (mention and camera come back when empty) */
    html.imc-mobile.imc-compose-typed .imc-compose-btn:nth-child(1),
    html.imc-mobile.imc-compose-typed .imc-compose-btn:nth-child(3) {
        display: none;
    }

    html.imc-mobile.imc-compose-typed #compose-textarea {
        padding-right: 82px !important;
    }

    /* Longer text: full width, the two buttons sit on a row under it */
    html.imc-mobile.imc-compose-tall #compose-textarea {
        padding: 12px 16px 44px !important;
    }

    html.imc-mobile.imc-compose-tall .imc-compose-tools {
        bottom: 4px;
    }

    /* Channel feed (all topics): "LeadsMaker Group > topic" becomes a topic chip */
    html.imc-view-channel .message_header {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 12px 10px 4px !important;
    }

    html.imc-view-channel .message_header .message-header-contents {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        width: auto !important;
        max-width: 100%;
        min-height: 0 !important;
        padding: 6px 12px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: var(--imc-surface, #fff) !important;
        box-shadow: 0 1px 3px rgb(15 42 95 / 12%);
    }

    html.imc-view-channel .message_header .stream_label,
    html.imc-view-channel .message_header .stream_topic_separator,
    html.imc-view-channel .message_header .copy-paste-text,
    html.imc-view-channel .message_header .recipient_bar_controls {
        display: none !important;
    }

    html.imc-view-channel .message_header .stream_topic {
        font-size: 14.5px;
        font-weight: 700;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html.imc-view-channel .message_header .stream_topic::before {
        content: "#";
        margin-right: 4px;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    html.imc-view-channel .message_header .stream_topic a {
        color: inherit !important;
    }

    html.imc-view-channel .message_header .recipient_row_date {
        font-size: 12px;
        color: var(--imc-muted, #6b7280);
        white-space: nowrap;
    }

    /* Members screen */
    .imc-members-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 16px 20px 0;
    }

    .imc-members-count {
        font-size: 28px;
        font-weight: 800;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    .imc-member-chat {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 14%));
        color: light-dark(var(--imc-brand), #8fb4ff);
        font-size: 17px;
    }

    /* Three buttons under the channel name */
    .imc-head-actions .imc-pill-button {
        font-size: 14px;
        gap: 6px;
    }
}

/* ---------- PC / laptop (768px and wider) ----------
   Same look as the phone app, laid out for a wide screen: chat bubbles,
   Teams-like sidebars, modern typing box. app.js sets html.imc-desktop. */

@media (min-width: 768px), (pointer: fine) {
    html.imc-desktop {
        --imc-chat-bg: light-dark(#eef2f8, #0b101c);
        --imc-surface: light-dark(#ffffff, #141b2d);
        --imc-bubble-in: light-dark(#ffffff, #1c2539);
        --imc-bubble-in-text: light-dark(#111827, #e8ecf4);
        --imc-bubble-out: light-dark(#1f4fae, #2a56b8);
        --imc-muted: light-dark(#6b7280, #94a0b8);
        --imc-hover: light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 9%));
        --color-background: var(--imc-chat-bg);
    }

    /* ===== Left sidebar: like Teams ===== */
    html.imc-desktop #left-sidebar {
        min-height: 100vh;
        background: var(--imc-surface);
        border-right: 1px solid light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 6%));
    }

    html.imc-desktop #left-sidebar .left-sidebar-navigation-area,
    html.imc-desktop #left-sidebar #left_sidebar_scroll_container {
        padding-right: 6px;
    }

    html.imc-desktop #left-sidebar .top_left_row,
    html.imc-desktop #left-sidebar .bottom_left_row,
    html.imc-desktop #left-sidebar .dm-list .dm-box,
    html.imc-desktop #left-sidebar .topic-list-item .topic-box {
        border-radius: 10px !important;
        min-height: 34px;
        transition: background-color 0.12s ease;
    }

    html.imc-desktop #left-sidebar .top_left_row:hover,
    html.imc-desktop #left-sidebar .bottom_left_row:hover {
        background: var(--imc-hover) !important;
    }

    html.imc-desktop #left-sidebar .top_left_row.active-filter,
    html.imc-desktop #left-sidebar li.active-filter > .bottom_left_row,
    html.imc-desktop #left-sidebar .active-sub-filter,
    html.imc-desktop #left-sidebar .top_left_row.top-left-active-filter {
        background: light-dark(rgb(31 79 174 / 12%), rgb(59 130 246 / 22%)) !important;
        box-shadow: inset 3px 0 0 var(--imc-brand);
        font-weight: 700;
    }

    html.imc-desktop #left-sidebar .stream-name,
    html.imc-desktop #left-sidebar .dm-name,
    html.imc-desktop #left-sidebar .left-sidebar-navigation-label,
    html.imc-desktop #left-sidebar .sidebar-topic-name {
        font-size: 14.5px;
    }

    html.imc-desktop #left-sidebar .unread_count {
        min-width: 20px;
        border-radius: 10px !important;
        background: light-dark(var(--imc-brand), #3b82f6) !important;
        color: #fff !important;
        font-weight: 700;
        text-align: center;
    }

    html.imc-desktop #left-sidebar .left-sidebar-title,
    html.imc-desktop #left-sidebar .heading-text,
    html.imc-desktop #left-sidebar .direct-messages-container .heading-text {
        font-size: 11.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.07em;
        color: var(--imc-muted) !important;
    }

    /* ===== Right sidebar (people) ===== */
    html.imc-desktop #right-sidebar {
        background: var(--imc-surface);
        border-left: 1px solid light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 6%));
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry .selectable_sidebar_block {
        border-radius: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry:hover .selectable_sidebar_block {
        background: var(--imc-hover);
    }

    html.imc-desktop #right-sidebar .user-profile-picture img {
        border-radius: 50% !important;
    }

    /* ===== Message list: bubbles ===== */
    html.imc-desktop .recipient_row {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        margin-bottom: 10px !important;
    }

    html.imc-desktop .message_row {
        background: transparent !important;
        border: 0 !important;
    }

    html.imc-desktop .unread_marker {
        display: none !important;
    }

    html.imc-desktop .messagebox,
    html.imc-desktop .message_row.selected_message .messagebox {
        padding: 1px 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        outline: 0 !important;
    }

    html.imc-desktop .messagebox-content {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        grid-template-areas:
            "sender time"
            "message message"
            "more more"
            "reactions reactions"
            "reminders reminders" !important;
        column-gap: 14px;
        width: fit-content;
        min-width: 140px;
        max-width: min(68%, 760px);
        margin: 0 0 0 48px !important;
        padding: 8px 14px 7px !important;
        border-radius: 18px;
        background: var(--imc-bubble-in);
        color: var(--imc-bubble-in-text);
        box-shadow: 0 1px 2px rgb(15 42 95 / 10%);
    }

    html.imc-desktop .messagebox-includes-sender {
        margin-top: 10px;
    }

    html.imc-desktop .messagebox-includes-sender .messagebox-content {
        border-top-left-radius: 6px;
    }

    html.imc-desktop .message-avatar {
        grid-area: auto !important;
        position: absolute !important;
        left: -46px;
        top: 0;
        width: 36px !important;
        height: 36px !important;
    }

    html.imc-desktop .message-avatar img,
    html.imc-desktop .message-avatar .inline_profile_picture {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
    }

    html.imc-desktop .message_sender {
        grid-area: sender !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
        color: light-dark(var(--imc-name, var(--imc-brand)), var(--imc-name-dark, #8fb4ff)) !important;
    }

    html.imc-desktop .message_sender .sender_name,
    html.imc-desktop .message_sender .sender_name-text,
    html.imc-desktop .message_sender .user-name {
        color: inherit !important;
        font-size: inherit !important;
    }

    html.imc-desktop .messagebox-content .message_content {
        grid-area: message !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: inherit;
        min-width: 0;
    }

    html.imc-desktop .message_content p:last-child {
        margin-bottom: 0;
    }

    html.imc-desktop .message_content img,
    html.imc-desktop .message_inline_image img {
        border-radius: 10px;
    }

    /* Time: next to the name; on follow-up messages, small at the bottom right */
    html.imc-desktop .messagebox-content .message-time {
        grid-area: time !important;
        position: static !important;
        display: block !important;
        justify-self: end;
        align-self: center;
        padding: 0 !important;
        background: none !important;
        font-size: 11.5px !important;
        opacity: 0.6;
        color: inherit !important;
        white-space: nowrap;
    }

    html.imc-desktop .message_row:not(.messagebox-includes-sender) .messagebox-content {
        grid-template-areas:
            "message time"
            "more more"
            "reactions reactions"
            "reminders reminders" !important;
    }

    html.imc-desktop .message_row:not(.messagebox-includes-sender) .message-time {
        align-self: end;
    }

    /* Hover actions float at the bubble's top right corner */
    html.imc-desktop .messagebox-content .message_controls {
        grid-area: auto !important;
        position: absolute !important;
        top: -14px;
        right: 8px;
        display: flex !important;
        gap: 2px;
        padding: 2px 4px;
        border-radius: 10px;
        background: var(--imc-surface);
        box-shadow: 0 2px 10px rgb(15 42 95 / 18%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.12s ease;
        z-index: 2;
    }

    html.imc-desktop .message_row:hover .messagebox-content .message_controls,
    html.imc-desktop .message_row.selected_message .messagebox-content .message_controls:focus-within {
        opacity: 1;
        pointer-events: auto;
    }

    html.imc-desktop .message_controls .message-controls-icon {
        color: var(--imc-muted) !important;
    }

    html.imc-desktop .message_reactions {
        grid-area: reactions !important;
        margin-top: 6px;
    }

    /* Selected message (keyboard navigation): a soft glow, not a ring */
    html.imc-desktop .selected_message .messagebox-content {
        box-shadow: 0 2px 10px light-dark(rgb(31 79 174 / 16%), rgb(0 0 0 / 40%));
    }

    /* Your messages: right side, blue */
    html.imc-desktop [data-imc-mine] .messagebox-content {
        margin-left: auto !important;
        margin-right: 0 !important;
        background: var(--imc-bubble-out);
        color: #fff;
        border-top-left-radius: 18px;
    }

    html.imc-desktop [data-imc-mine].messagebox-includes-sender .messagebox-content {
        border-top-right-radius: 6px;
        grid-template-areas:
            "message time"
            "more more"
            "reactions reactions"
            "reminders reminders" !important;
    }

    html.imc-desktop [data-imc-mine] .message-avatar,
    html.imc-desktop [data-imc-mine] .message_sender {
        display: none !important;
    }

    html.imc-desktop [data-imc-mine] .message-time {
        align-self: end !important;
    }

    html.imc-desktop [data-imc-mine] .message_content a {
        color: #dbe8ff !important;
        text-decoration: underline;
    }

    html.imc-desktop [data-imc-mine] .message_content code,
    html.imc-desktop [data-imc-mine] .message_content pre,
    html.imc-desktop [data-imc-mine] .message_content blockquote {
        background: rgb(255 255 255 / 15%) !important;
        color: #fff !important;
        border-color: rgb(255 255 255 / 45%) !important;
    }

    html.imc-desktop [data-imc-mine] .user-mention {
        background: rgb(255 255 255 / 20%) !important;
        color: #fff !important;
    }

    html.imc-desktop [data-imc-mine] .message_reactions .message_reaction {
        background: rgb(255 255 255 / 18%) !important;
        color: #fff !important;
        border-color: transparent !important;
    }

    /* One-on-one chat: no avatar/name needed */
    html.imc-desktop.imc-view-dm1 .message-avatar,
    html.imc-desktop.imc-view-dm1 .message_sender {
        display: none !important;
    }

    html.imc-desktop.imc-view-dm1 .message_row:not([data-imc-mine]) .messagebox-content {
        margin-left: 0 !important;
    }

    html.imc-desktop.imc-view-dm1 .messagebox-includes-sender .messagebox-content {
        grid-template-areas:
            "message time"
            "more more"
            "reactions reactions"
            "reminders reminders" !important;
    }

    /* Quotes / replies inside bubbles */
    html.imc-desktop .message_content blockquote {
        margin: 4px 0 6px !important;
        padding: 6px 12px !important;
        border: 0 !important;
        border-left: 3px solid light-dark(var(--imc-brand), #8fb4ff) !important;
        border-radius: 8px;
        background: light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 10%));
    }

    html.imc-desktop .message_content .user-mention:not(.silent) {
        padding: 0 4px;
        border-radius: 6px;
        background: light-dark(rgb(31 79 174 / 12%), rgb(143 180 255 / 18%)) !important;
        color: light-dark(var(--imc-brand), #8fb4ff) !important;
        font-weight: 600;
    }

    /* ===== Block headers ===== */
    /* Inside one conversation: just a centred date pill */
    html.imc-desktop.imc-view-conversation .message_header {
        display: flex !important;
        justify-content: center;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 12px 0 4px !important;
    }

    html.imc-desktop.imc-view-conversation .message_header .message-header-contents {
        display: inline-flex !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 4px 14px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: var(--imc-surface) !important;
        box-shadow: 0 1px 2px rgb(15 42 95 / 10%);
    }

    html.imc-desktop.imc-view-conversation .message-header-contents > :not(.recipient_row_date) {
        display: none !important;
    }

    html.imc-desktop.imc-view-conversation .recipient_row_date {
        font-size: 12px !important;
        font-weight: 600;
        color: var(--imc-muted) !important;
    }

    /* Feeds with many conversations: a rounded label bar */
    html.imc-desktop:not(.imc-view-conversation) .message_header {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 14px 16px 4px !important;
    }

    html.imc-desktop:not(.imc-view-conversation) .message_header .message-header-contents {
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgb(15 42 95 / 12%);
    }

    /* Day change */
    html.imc-desktop .message_feed_divider {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: center;
        margin: 12px 0 6px !important;
        border: 0 !important;
        background: none !important;
    }

    html.imc-desktop .message_feed_divider::before,
    html.imc-desktop .message_feed_divider::after,
    html.imc-desktop .date-divider-content::before,
    html.imc-desktop .date-divider-content::after {
        display: none !important;
    }

    html.imc-desktop .date-divider-content {
        padding: 4px 14px !important;
        border-radius: 12px;
        background: var(--imc-surface) !important;
        box-shadow: 0 1px 2px rgb(15 42 95 / 10%);
        font-size: 12px !important;
        font-weight: 600;
        color: var(--imc-muted) !important;
    }

    /* "New messages" and "Seen" (shared with the phone) */
    html.imc-desktop .message_row[data-imc-first-unread]::before {
        content: "New messages";
        grid-column: 1 / -1;
        display: block;
        margin: 12px auto 8px;
        padding: 4px 14px;
        border-radius: 12px;
        background: var(--imc-brand);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        width: max-content;
    }

    html.imc-desktop .imc-receipt {
        display: block;
        grid-row: 20; /* after the bubble, not above it */
        grid-column: 1 / -1;
        justify-self: end;
        margin: 2px 20px 4px 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--imc-muted);
    }

    html.imc-desktop .imc-receipt.imc-seen {
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    /* ===== Typing box ===== */
    html.imc-desktop #compose {
        background: transparent !important;
    }

    /* Zulip positions this box under the middle column (margins change with
       the window width), so only its look is changed here, never margins. */
    html.imc-desktop #compose-content {
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        background: var(--imc-surface) !important;
        box-shadow: 0 2px 14px rgb(15 42 95 / 10%) !important;
    }

    html.imc-desktop #compose-textarea {
        border: 0 !important;
        border-radius: 14px !important;
        background: light-dark(#f3f6fb, #1c2539) !important;
        font-size: 15px !important;
        padding: 10px 14px !important;
        box-shadow: none !important;
    }

    html.imc-desktop #compose-textarea:focus {
        box-shadow: inset 0 0 0 1.5px light-dark(rgb(31 79 174 / 40%), rgb(143 180 255 / 40%)) !important;
    }

    html.imc-desktop #compose-send-button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2)) !important;
        box-shadow: 0 3px 10px rgb(31 79 174 / 30%);
    }

    /* The collapsed "Message ..." bar and its buttons: pills, not circles */
    html.imc-desktop .compose_reply_button,
    html.imc-desktop #left_bar_compose_reply_button_big {
        height: 40px;
        border: 0 !important;
        border-radius: 20px !important;
        background: light-dark(#f3f6fb, #1c2539) !important;
        color: var(--imc-muted) !important;
        text-align: left;
        padding: 0 18px !important;
    }

    html.imc-desktop #new_conversation_button,
    html.imc-desktop #new_direct_message_button,
    html.imc-desktop .compose_new_conversation_button {
        width: auto !important;
        height: 40px;
        padding: 0 16px !important;
        border-radius: 20px !important;
        background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 14%)) !important;
        color: light-dark(var(--imc-brand), #8fb4ff) !important;
        font-weight: 600;
    }

    /* ===== Inbox and Recent tables: cards with soft rows ===== */
    html.imc-desktop #inbox-main,
    html.imc-desktop #recent_view_table {
        border-radius: 16px;
        background: var(--imc-surface);
        box-shadow: 0 1px 3px rgb(15 42 95 / 8%);
    }

    html.imc-desktop #inbox-view .inbox-row:hover,
    html.imc-desktop #recent-view-content-table tr:hover {
        background: var(--imc-hover) !important;
    }

    html.imc-desktop #recent-view-content-table td {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* ===== Slim scrollbars ===== */
    html.imc-desktop ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    html.imc-desktop ::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 8px;
        background: light-dark(rgb(15 42 95 / 20%), rgb(255 255 255 / 18%)) padding-box;
    }

    html.imc-desktop ::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ---------- PC left sidebar: Views, Direct messages, Channels (Teams-like) ---------- */

@media (min-width: 768px), (pointer: fine) {
    html.imc-desktop #left-sidebar {
        padding-left: 10px !important;
    }

    /* Filter field: a rounded pill */
    html.imc-desktop #left-sidebar .left-sidebar-search-input {
        height: 34px;
        border: 0 !important;
        border-radius: 17px !important;
        background: light-dark(#f1f4f9, #1c2539) !important;
        font-size: 14px;
        box-shadow: none !important;
    }

    html.imc-desktop #left-sidebar .left-sidebar-search-input:focus {
        box-shadow: inset 0 0 0 1.5px light-dark(rgb(31 79 174 / 40%), rgb(143 180 255 / 40%)) !important;
    }

    /* Section titles: VIEWS, DIRECT MESSAGES, CHANNELS */
    html.imc-desktop #left-sidebar .left-sidebar-section-header {
        margin-top: 10px;
        padding-top: 6px;
        background: var(--imc-surface, #fff) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html.imc-desktop #left-sidebar .left-sidebar-title,
    html.imc-desktop #left-sidebar .left-sidebar-section-header .heading-text,
    html.imc-desktop #left-sidebar .stream-list-subsection-header {
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em;
        color: var(--imc-muted, #6b7280) !important;
    }

    /* Zulip lays these lists out as grids with fixed 25px rows; let the
       taller rows below set their own height instead of overlapping. */
    html.imc-desktop #left-sidebar ul {
        grid-auto-rows: auto !important;
    }

    /* ===== Rows (all sections) ===== */
    html.imc-desktop #left-sidebar .top_left_row,
    html.imc-desktop #left-sidebar li.narrow-filter > .bottom_left_row,
    html.imc-desktop #left-sidebar .dm-list-item {
        min-height: 40px;
        margin: 1px 0;
        border-radius: 12px !important;
        transition: background-color 0.12s ease;
    }

    html.imc-desktop #left-sidebar .top_left_row > a,
    html.imc-desktop #left-sidebar .subscription_block,
    html.imc-desktop #left-sidebar .dm-box {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-height: 40px;
    }

    html.imc-desktop #left-sidebar .top_left_row:hover,
    html.imc-desktop #left-sidebar li.narrow-filter > .bottom_left_row:hover,
    html.imc-desktop #left-sidebar .dm-list-item:hover {
        background: var(--imc-hover, rgb(31 79 174 / 7%)) !important;
    }

    html.imc-desktop #left-sidebar .left-sidebar-navigation-label,
    html.imc-desktop #left-sidebar .stream-name,
    html.imc-desktop #left-sidebar .conversation-partners-list {
        font-size: 14.5px !important;
        font-weight: 500;
    }

    /* Active row: tinted, bold, a short straight blue bar on the left */
    html.imc-desktop #left-sidebar .top_left_row.top-left-active-filter,
    html.imc-desktop #left-sidebar .top_left_row.active-filter,
    html.imc-desktop #left-sidebar li.active-filter > .bottom_left_row,
    html.imc-desktop #left-sidebar .dm-list-item.active-sub-filter {
        position: relative;
        background: light-dark(rgb(31 79 174 / 12%), rgb(59 130 246 / 22%)) !important;
        box-shadow: none !important;
    }

    html.imc-desktop #left-sidebar .top_left_row.top-left-active-filter::before,
    html.imc-desktop #left-sidebar .top_left_row.active-filter::before,
    html.imc-desktop #left-sidebar li.active-filter > .bottom_left_row::before,
    html.imc-desktop #left-sidebar .dm-list-item.active-sub-filter::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 2px;
        background: var(--imc-brand);
    }

    html.imc-desktop #left-sidebar .top-left-active-filter .left-sidebar-navigation-label,
    html.imc-desktop #left-sidebar .active-filter .stream-name,
    html.imc-desktop #left-sidebar .active-sub-filter .conversation-partners-list {
        font-weight: 700;
    }

    /* ===== Views: each icon in its own coloured tile ===== */
    html.imc-desktop #left-sidebar .top_left_row .filter-icon,
    html.imc-desktop #left-sidebar .left-sidebar-navigation-condensed-item .filter-icon {
        --imc-tile: var(--imc-brand);
        flex: 0 0 28px;
        width: 28px !important;
        height: 28px !important;
        display: grid !important;
        place-items: center;
        border-radius: 9px;
        background: color-mix(in srgb, var(--imc-tile) 14%, transparent);
        color: var(--imc-tile) !important;
        font-size: 15px;
    }

    html.imc-desktop #left-sidebar .filter-icon .zulip-icon {
        color: inherit !important;
    }

    html.imc-desktop #left-sidebar .top_left_inbox .filter-icon { --imc-tile: #1f4fae; }
    html.imc-desktop #left-sidebar .top_left_recent_view .filter-icon { --imc-tile: #0e7c86; }
    html.imc-desktop #left-sidebar .top_left_all_messages .filter-icon { --imc-tile: #7c3aed; }
    html.imc-desktop #left-sidebar .top_left_mentions .filter-icon { --imc-tile: #c2410c; }
    html.imc-desktop #left-sidebar [class*="top_left_my_reactions"] .filter-icon,
    html.imc-desktop #left-sidebar [class*="top_left_reactions"] .filter-icon { --imc-tile: #be185d; }
    html.imc-desktop #left-sidebar .top_left_starred_messages .filter-icon { --imc-tile: #a16207; }
    html.imc-desktop #left-sidebar .top_left_drafts .filter-icon,
    html.imc-desktop #left-sidebar [class*="top_left_scheduled"] .filter-icon { --imc-tile: #475569; }

    /* ===== Channels: tile in the channel's own colour ===== */
    /* Zulip colours the icon inline (style="color: ..."), so currentColor
       is the channel colour. */
    html.imc-desktop #left-sidebar .subscription_block .stream-privacy {
        flex: 0 0 28px;
        width: 28px !important;
        height: 28px !important;
        display: grid !important;
        place-items: center;
        border-radius: 9px;
        background: color-mix(in srgb, currentColor 16%, transparent);
        font-size: 14px;
    }

    html.imc-desktop #left-sidebar li.narrow-filter:has(.unread_count:not(.zero_count):not(.hide)) .stream-name {
        font-weight: 700;
        color: light-dark(#111827, #ffffff);
    }

    /* Topics under an open channel */
    html.imc-desktop #left-sidebar .topic-list-item {
        border-radius: 10px;
        margin-left: 30px;
    }

    html.imc-desktop #left-sidebar .topic-list-item:hover {
        background: var(--imc-hover, rgb(31 79 174 / 7%));
    }

    html.imc-desktop #left-sidebar .topic-list-item.active-sub-filter {
        background: light-dark(rgb(31 79 174 / 10%), rgb(59 130 246 / 18%)) !important;
    }

    /* ===== Direct messages: avatar (added by app.js) instead of the circle ===== */
    html.imc-desktop #left-sidebar .dm-list-item[data-imc-av] .conversation-partners-icon {
        display: none !important;
    }

    html.imc-desktop #left-sidebar .imc-dm-avatar {
        position: relative;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: light-dark(#dbe3f1, #263049);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
    }

    html.imc-desktop #left-sidebar .imc-dm-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    html.imc-desktop #left-sidebar .imc-dm-avatar.imc-avatar-group {
        background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand-2));
    }

    html.imc-desktop #left-sidebar .imc-dm-avatar .imc-online {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 2px var(--imc-surface, #fff);
    }

    html.imc-desktop #left-sidebar .imc-dm-avatar .imc-online.imc-away {
        background: #f59e0b;
    }

    html.imc-desktop #left-sidebar .imc-dm-avatar.imc-avatar-group {
        font-size: 14px;
    }

    html.imc-desktop #left-sidebar .dm-list-item:not(.zero-dm-unreads) .conversation-partners-list {
        font-weight: 700;
    }

    /* ===== Unread counts: blue pills ===== */
    html.imc-desktop #left-sidebar .unread_count:not(.zero_count):not(.hide) {
        min-width: 22px;
        height: 20px;
        padding: 0 7px;
        border-radius: 10px !important;
        background: light-dark(var(--imc-brand), #3b82f6) !important;
        color: #fff !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    /* "Create a channel" / "Browse channels" links */
    html.imc-desktop #left-sidebar .add_streams_link,
    html.imc-desktop #left-sidebar #add_streams_tooltip,
    html.imc-desktop #left-sidebar .subscribe-more-link {
        border-radius: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
}

/* ---------- PC right sidebar: people list ---------- */

@media (min-width: 768px), (pointer: fine) {
    html.imc-desktop #user-list {
        padding: 10px 8px 0 6px;
    }

    /* Search: rounded pill */
    html.imc-desktop #userlist-header {
        margin-bottom: 8px;
    }

    html.imc-desktop #userlist-header-search .user-list-filter {
        height: 34px;
        border: 0 !important;
        border-radius: 17px !important;
        background: light-dark(#f1f4f9, #1c2539) !important;
        font-size: 14px;
        box-shadow: none !important;
    }

    html.imc-desktop #userlist-header-search .user-list-filter:focus {
        box-shadow: inset 0 0 0 1.5px light-dark(rgb(31 79 174 / 40%), rgb(143 180 255 / 40%)) !important;
    }

    /* Section titles: THIS CONVERSATION / THIS CHANNEL / OTHERS */
    html.imc-desktop #right-sidebar .buddy-list-subsection-header {
        margin: 10px 4px 4px;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--imc-muted, #6b7280) !important;
        background: transparent !important;
    }

    /* One person per row: photo, name, status underneath */
    html.imc-desktop #right-sidebar .user_sidebar_entry {
        margin: 1px 0;
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry .selectable_sidebar_block {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 4px 8px !important;
        border-radius: 12px;
        transition: background-color 0.12s ease;
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry:hover .selectable_sidebar_block {
        background: var(--imc-hover, rgb(31 79 174 / 7%));
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry.highlighted_user .selectable_sidebar_block {
        background: light-dark(rgb(31 79 174 / 10%), rgb(59 130 246 / 18%));
    }

    html.imc-desktop #right-sidebar .user-profile-picture-container,
    html.imc-desktop #right-sidebar .user-profile-picture {
        position: relative;
        flex: 0 0 34px;
        width: 34px !important;
        height: 34px !important;
    }

    html.imc-desktop #right-sidebar .user-profile-picture img {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        object-fit: cover;
    }

    /* Coloured initials on top of the default silhouette (app.js) */
    html.imc-desktop #right-sidebar .imc-initials {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry:has(.user-circle-offline) .imc-initials {
        opacity: 0.8;
    }

    /* Zulip's status circle becomes a dot on the photo */
    html.imc-desktop #right-sidebar .user-profile-picture .user-circle {
        position: absolute !important;
        right: -2px;
        bottom: -2px;
        width: 13px !important;
        height: 13px !important;
        border-radius: 50%;
        background: var(--imc-surface, #fff);
        font-size: 13px !important;
        line-height: 13px;
    }

    html.imc-desktop #right-sidebar .user-presence-link {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        flex: 1 1 auto;
        gap: 1px;
    }

    html.imc-desktop #right-sidebar .user-name {
        font-size: 14.5px;
        font-weight: 600;
        color: light-dark(#111827, #e8ecf4);
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry_me .my_user_status {
        font-weight: 500;
        color: var(--imc-muted, #6b7280);
    }

    html.imc-desktop #right-sidebar .status-text:not(:empty),
    html.imc-desktop #right-sidebar .imc-user-status {
        display: block;
        font-size: 12.5px;
        line-height: 1.3;
        color: var(--imc-muted, #6b7280);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.imc-desktop #right-sidebar .imc-user-status.imc-online-text {
        color: #16a34a;
        font-weight: 600;
    }

    html.imc-desktop #right-sidebar .imc-user-status.imc-away-text {
        color: #d97706;
        font-weight: 600;
    }

    /* Offline people a little quieter */
    html.imc-desktop #right-sidebar .user_sidebar_entry:has(.user-circle-offline) .user-name {
        font-weight: 500;
        color: light-dark(#374151, #c3cbe0);
    }

    html.imc-desktop #right-sidebar .user_sidebar_entry:has(.user-circle-offline) img {
        opacity: 0.85;
    }

    /* "View all" and "Invite" links */
    html.imc-desktop #right-sidebar .buddy-list-user-link a,
    html.imc-desktop #right-sidebar .invite-user-link {
        border-radius: 10px;
        font-weight: 600;
    }
}

/* ---------- PC top bar: name, clear title, search pill, round buttons ---------- */

.imc-wordmark {
    display: none;
}

/* Channel tile in the title bar (phone and PC): white tile, channel colour */
.imc-title-tile {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--imc-channel-color, #1f4fae);
    font-size: 16px;
    box-shadow: 0 2px 6px rgb(8 14 30 / 20%);
}

@media (min-width: 768px), (pointer: fine) {
    /* "I&M Call" next to the sidebar button (added by app.js) */
    html.imc-desktop #top_navbar .column-left {
        display: flex !important;
        align-items: center;
        gap: 6px;
    }

    html.imc-desktop .imc-wordmark {
        display: inline-block;
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 0.01em;
        white-space: nowrap;
        user-select: none;
    }

    html.imc-desktop .imc-wordmark b {
        font-weight: 400;
        opacity: 0.85;
    }

    /* Round, softly highlighted buttons */
    html.imc-desktop #top_navbar .header-button,
    html.imc-desktop #top_navbar .left-sidebar-toggle-button {
        width: 34px !important;
        height: 34px !important;
        margin: 3px 2px;
        display: grid !important;
        place-items: center;
        border-radius: 50% !important;
        transition: background-color 0.12s ease;
    }

    html.imc-desktop #top_navbar .header-button:hover,
    html.imc-desktop #top_navbar .left-sidebar-toggle-button:hover {
        background: rgb(255 255 255 / 16%) !important;
    }

    html.imc-desktop #top_navbar .header-button .zulip-icon,
    html.imc-desktop #top_navbar .left-sidebar-toggle-button .zulip-icon {
        font-size: 17px;
    }

    /* Your photo: round with a light ring */
    html.imc-desktop #personal-menu img {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 2px rgb(255 255 255 / 55%);
        object-fit: cover;
    }

    /* ===== Who / where you are, like Teams: photo or channel tile, name,
       status underneath. Replaces Zulip's one-line title. ===== */
    html.imc-desktop #navbar-middle .column-middle-inner {
        display: flex !important;
        align-items: center;
        gap: 10px;
        height: 40px;
        min-width: 0;
    }

    html.imc-desktop #message_view_header {
        display: none !important;
    }

    html.imc-desktop #imc-title-face:not([hidden]) {
        display: block;
        flex: 0 0 auto;
        cursor: pointer;
    }

    html.imc-desktop #imc-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 55%;
        color: #fff;
        line-height: 1.15;
        cursor: pointer;
    }

    html.imc-desktop #imc-title .imc-title-main {
        font-size: 15.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.imc-desktop #imc-title .imc-title-sub {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.imc-desktop #imc-title .imc-title-sub.imc-sub-live {
        color: #bbf7d0;
        opacity: 1;
    }

    html.imc-desktop #imc-title:hover .imc-title-main {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    html.imc-desktop .top-navbar-container {
        flex: 1 1 auto;
        position: relative;
        min-width: 0;
        height: 40px;
    }

    /* Search open: it takes the whole bar */
    html.imc-desktop.imc-search-open #imc-title,
    html.imc-desktop.imc-search-open #imc-title-face {
        display: none !important;
    }

    /* Photo in the title */
    html.imc-desktop #imc-title-face .imc-avatar {
        position: relative;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 0 0 2px rgb(255 255 255 / 45%);
    }

    html.imc-desktop #imc-title-face .imc-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    html.imc-desktop #imc-title-face .imc-online {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 2px var(--imc-brand);
    }

    html.imc-desktop #imc-title-face .imc-online.imc-away {
        background: #f59e0b;
    }

    /* Title of the channel / conversation */
    html.imc-desktop #message_view_header .message-header-navbar-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    html.imc-desktop #message_view_header .narrow_description {
        font-size: 13.5px;
        opacity: 0.75 !important;
    }

    /* Search: a visible, see-through pill while closed */
    html.imc-desktop #searchbox_form.navbar-search:not(.expanded) {
        width: 240px !important;
        height: 32px;
        border-radius: 16px !important;
        background: rgb(255 255 255 / 15%) !important;
        border: 1px solid rgb(255 255 255 / 18%) !important;
        transition: background-color 0.15s ease;
        cursor: text;
    }

    html.imc-desktop #searchbox_form.navbar-search:not(.expanded):hover {
        background: rgb(255 255 255 / 22%) !important;
    }

    html.imc-desktop #searchbox_form.navbar-search:not(.expanded) * {
        color: rgb(255 255 255 / 85%) !important;
    }

    /* Open search: white field with rounded corners */
    html.imc-desktop #searchbox_form.navbar-search.expanded {
        border-radius: 16px !important;
        box-shadow: 0 6px 20px rgb(8 14 30 / 25%);
    }
}

/* ---------- v1.1 features: quick reactions, reply card on PC, activity,
   photo preview, settings, status ---------- */

/* ===== v1.2: call buttons, search screen, voice messages (phone + PC) ===== */
.imc-call-btns,
.imc-call-btn.imc-appbar-new,
.imc-mic {
    display: none;
}

html.imc-mobile.imc-on-dms .imc-appbar-new {
    display: grid;
    flex: 0 0 auto;
    margin-left: auto;
}

:is(html.imc-mobile, html.imc-desktop).imc-view-conversation:not(.imc-search-open, .imc-panel-open) .imc-call-btns {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    margin-left: auto;
}

.imc-call-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.imc-call-btn:hover,
.imc-call-btn:active {
    background: rgb(255 255 255 / 18%);
}

/* Mic in place of Send while the field is empty */
:is(html.imc-mobile, html.imc-desktop).imc-compose-empty .imc-mic {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgb(31 79 174 / 30%);
}

html.imc-mobile.imc-compose-empty .imc-mic {
    width: 46px;
    height: 46px;
}

html.imc-desktop.imc-compose-empty .imc-mic {
    width: 40px;
    height: 40px;
}

:is(html.imc-mobile, html.imc-desktop).imc-compose-empty #compose-send-button {
    display: none !important;
}

/* Recording bar */
.imc-recording {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom) + var(--imc-kb, 0px));
    z-index: 1004;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 8px;
    border-radius: 29px;
    background: var(--imc-surface, #fff);
    color: var(--imc-text, #111827);
    box-shadow: 0 8px 28px rgb(8 14 30 / 30%);
    animation: imc-fade-in 0.15s ease-out;
}

@keyframes imc-fade-in {
    from {
        opacity: 0;
    }
}

html.imc-desktop .imc-recording {
    left: 50%;
    right: auto;
    width: 420px;
    transform: translateX(-50%);
}

.imc-rec-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dc2626;
    animation: imc-pulse 1s ease-in-out infinite;
}

@keyframes imc-pulse {
    50% {
        opacity: 0.25;
    }
}

.imc-rec-time {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.imc-rec-label {
    flex: 1;
    color: var(--imc-muted, #6b7280);
    font-size: 14px;
}

.imc-rec-cancel,
.imc-rec-send {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.imc-rec-cancel {
    background: rgb(220 38 38 / 10%);
    color: #dc2626;
}

.imc-rec-send {
    background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
    color: #fff;
}

/* Voice messages play inside the bubble */
.message_content audio.imc-audio {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 40px;
    margin: 4px 0 2px;
}

.message_content .imc-audio-link {
    font-size: 12px;
    opacity: 0.75;
}

/* Search results */
.imc-search-snippet {
    margin-top: 2px;
    font-size: 14.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imc-hit {
    padding: 0 2px;
    border-radius: 4px;
    background: light-dark(rgb(245 158 11 / 25%), rgb(245 158 11 / 30%));
    color: inherit;
    font-weight: 700;
}

@media (max-width: 767px) and (pointer: coarse) {
    /* Activity: small badge on the photo says what happened */
    html.imc-mobile .imc-activity-badge {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        font-size: 11px;
        box-shadow: 0 0 0 2px var(--imc-surface, #fff);
    }

    html.imc-mobile .imc-badge-mention {
        background: #ea580c;
    }

    html.imc-mobile .imc-badge-reaction {
        background: #db2777;
    }

    html.imc-mobile .imc-wrap-title {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 15.5px !important;
    }

    html.imc-mobile .imc-activity .imc-row-title {
        font-weight: 500;
    }

    html.imc-mobile .imc-activity.imc-has-unread .imc-row-title {
        font-weight: 800;
    }

    /* Photo / file preview before attaching */
    .imc-upload {
        position: fixed;
        inset: 0;
        z-index: 1003;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: rgb(8 14 30 / 75%);
        animation: imc-fade-in 0.15s ease-out;
    }

    @keyframes imc-fade-in {
        from {
            opacity: 0;
        }
    }

    .imc-upload-box {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 88vh;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        background: var(--imc-surface, #fff);
        color: var(--imc-text, #111827);
    }

    .imc-upload-title {
        font-size: 17px;
        font-weight: 800;
    }

    .imc-upload-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        overflow-y: auto;
    }

    .imc-upload-single {
        grid-template-columns: 1fr;
    }

    .imc-upload-item {
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 12px;
        background: light-dark(#f1f4f9, #1c2539);
    }

    .imc-upload-single .imc-upload-item {
        aspect-ratio: auto;
        max-height: 60vh;
        display: grid;
        place-items: center;
    }

    .imc-upload-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .imc-upload-single .imc-upload-item img {
        height: auto;
        max-height: 60vh;
        object-fit: contain;
    }

    .imc-upload-doc {
        height: 100%;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px;
        text-align: center;
        font-size: 26px;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    .imc-upload-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--imc-text, #111827);
        word-break: break-all;
    }

    .imc-upload-size {
        font-size: 12px;
        color: var(--imc-muted, #6b7280);
    }

    .imc-upload-actions {
        display: flex;
        gap: 10px;
    }

    .imc-upload-actions button {
        flex: 1;
        height: 50px;
        border: 0;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
    }

    .imc-upload-cancel {
        background: light-dark(#eef2f8, #1c2539);
        color: var(--imc-text, #111827);
    }

    .imc-upload-send {
        background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
        color: #fff;
    }

    html.imc-mobile .imc-dot-unread {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: light-dark(var(--imc-brand), #3b82f6);
    }
}

@media (min-width: 768px), (pointer: fine) {
    /* Quick reactions inside the hover bar */
    html.imc-desktop .imc-quick-reacts {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        margin-right: 4px;
        padding-right: 4px;
        border-right: 1px solid light-dark(rgb(15 42 95 / 10%), rgb(255 255 255 / 10%));
    }

    html.imc-desktop .imc-quick-react {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.12s ease, background-color 0.12s ease;
    }

    html.imc-desktop .imc-quick-react:hover {
        background: var(--imc-hover, rgb(31 79 174 / 8%));
        transform: scale(1.18);
    }

    html.imc-desktop .imc-quick-reply {
        color: var(--imc-muted, #6b7280);
        font-size: 15px;
    }

    /* "Replying to ..." card above the typing box on PC */
    html.imc-desktop .imc-reply-card:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 8px;
        padding: 8px 6px 8px 0;
        border-radius: 12px;
        background: light-dark(#f1f4f9, #1c2539);
        overflow: hidden;
    }

    html.imc-desktop .imc-reply-accent {
        align-self: stretch;
        flex: 0 0 4px;
        border-radius: 0 3px 3px 0;
        background: light-dark(var(--imc-brand), #8fb4ff);
    }

    html.imc-desktop .imc-reply-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    html.imc-desktop .imc-reply-name {
        font-size: 13px;
        font-weight: 700;
        color: light-dark(var(--imc-brand), #8fb4ff);
    }

    html.imc-desktop .imc-reply-snippet {
        font-size: 13.5px;
        color: var(--imc-muted, #6b7280);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.imc-desktop .imc-reply-close {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--imc-muted, #6b7280);
        cursor: pointer;
    }

    html.imc-desktop .imc-reply-close:hover {
        background: var(--imc-hover, rgb(31 79 174 / 8%));
    }

    html.imc-desktop .imc-reply-card[hidden] {
        display: none !important;
    }
}

/* ===== Design self-check banner (admins, after Zulip upgrades) ===== */
.imc-selfcheck {
    position: fixed;
    left: 50%;
    top: 56px;
    z-index: 1005;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(560px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7ed;
    color: #7c2d12;
    border: 1px solid #fdba74;
    box-shadow: 0 10px 30px rgb(8 14 30 / 20%);
    transform: translateX(-50%);
    font-size: 13.5px;
    line-height: 1.4;
}

.imc-selfcheck.imc-selfcheck-ok {
    background: #f0fdf4;
    color: #14532d;
    border-color: #86efac;
}

.imc-selfcheck-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.imc-selfcheck-hint {
    margin-top: 4px;
    opacity: 0.8;
}

.imc-selfcheck-close {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: rgb(0 0 0 / 8%);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ===== Chat: quick people row + labelled New chat button (phone) ===== */
@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile .imc-quick-people {
        padding: 6px 0 10px;
        border-bottom: 1px solid var(--imc-divider, #eef1f6);
    }

    html.imc-mobile .imc-quick-title {
        padding: 6px 20px 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--imc-muted, #6b7280);
    }

    html.imc-mobile .imc-quick-row {
        display: flex;
        gap: 4px;
        padding: 0 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    html.imc-mobile .imc-quick-person {
        flex: 0 0 68px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 4px 0;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: inherit;
    }

    html.imc-mobile .imc-quick-person:active {
        background: var(--imc-pressed, #f1f4fa);
    }

    html.imc-mobile .imc-avatar-quick {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        font-size: 19px;
    }

    html.imc-mobile .imc-avatar-quick .imc-online {
        width: 15px;
        height: 15px;
        right: 0;
        bottom: 0;
    }

    html.imc-mobile .imc-quick-name {
        max-width: 64px;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* "New chat" button with its name on it */
    /* z-index: chat rows have z-index 1 (swipe), so with a long list
       (All) they could be drawn over the button on phones. */
    html.imc-mobile #imc-panel-dms .imc-fab {
        z-index: 20;
        width: auto;
        height: 54px;
        padding: 0 20px 0 16px;
        gap: 8px;
        display: flex;
        align-items: center;
        border-radius: 27px;
        font-size: 20px;
    }

    html.imc-mobile .imc-fab-label {
        font-size: 16px;
        font-weight: 700;
    }
}

/* ===== Replies in bubbles: name + one line in a single small card ===== */
:is(html.imc-mobile, html.imc-desktop) .message_content p:has(+ blockquote) {
    margin: 2px 0 0 !important;
    padding: 6px 10px 0 !important;
    border-left: 3px solid light-dark(var(--imc-brand), #8fb4ff) !important;
    border-radius: 8px 8px 0 0;
    background: light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 10%));
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.3;
}

:is(html.imc-mobile, html.imc-desktop) .message_content p:has(+ blockquote) + blockquote {
    margin: 0 0 6px !important;
    padding: 2px 10px 6px !important;
    border-radius: 0 0 8px 8px !important;
    max-height: none !important;
}

/* Long quotes (also older replies): two lines at most */
:is(html.imc-mobile, html.imc-desktop) .message_content blockquote > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    font-size: 13.5px;
    opacity: 0.85;
}

:is(html.imc-mobile, html.imc-desktop) .message_content blockquote > p ~ * {
    display: none;
}

:is(html.imc-mobile, html.imc-desktop) [data-imc-mine] .message_content p:has(+ blockquote) {
    border-left-color: rgb(255 255 255 / 80%) !important;
    background: rgb(255 255 255 / 14%);
}

:is(html.imc-mobile, html.imc-desktop) .message_content p:has(+ blockquote) .user-mention,
:is(html.imc-mobile, html.imc-desktop) .message_content p:has(+ blockquote) a {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 700;
}

/* ===== v1.5: Seen by list, theme button, quick replies ===== */
.imc-theme-btn,
.imc-qr-bar {
    display: none;
}

html.imc-desktop .imc-theme-btn {
    width: 34px;
    height: 34px;
    margin: 3px 2px;
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

html.imc-desktop .imc-theme-btn:hover {
    background: rgb(255 255 255 / 16%);
}

.imc-seen-row .imc-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
}

.imc-seen-row .imc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imc-seen-empty {
    padding: 14px 10px;
    color: var(--imc-muted, #6b7280);
    font-size: 14.5px;
}

/* Quick replies: chips above the text field while it's empty */
:is(html.imc-mobile, html.imc-desktop).imc-compose-open.imc-compose-empty .imc-qr-bar {
    display: flex;
    gap: 6px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.imc-qr-chip {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    border: 1px solid light-dark(rgb(31 79 174 / 22%), rgb(143 180 255 / 25%));
    border-radius: 16px;
    background: light-dark(#ffffff, #1c2539);
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.imc-qr-chip:active {
    transform: scale(0.96);
}

.imc-qr-add {
    border-style: dashed;
    color: var(--imc-muted, #6b7280);
}

.imc-qr-chip.imc-qr-confirm {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.imc-qr-input {
    flex: 0 0 240px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--imc-brand);
    border-radius: 16px;
    background: light-dark(#fff, #1a2234);
    color: inherit;
    font-size: 14px;
    outline: 0;
}

/* ===== PC: "New chat" button in the sidebar, picker as a window ===== */
.imc-side-new,
.imc-dlg-head,
.imc-dlg-backdrop {
    display: none;
}

html.imc-desktop .imc-side-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Same left and right edges as the filter field and the lists below
       (#left-sidebar has 10px padding on the left, lists stop 6px before
       the right edge); border-box so Zulip's button padding can't widen it. */
    box-sizing: border-box;
    width: calc(100% - 6px);
    height: 40px;
    margin: 10px 6px 8px 0;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgb(31 79 174 / 25%);
    transition: filter 0.12s ease, transform 0.12s ease;
}

html.imc-desktop .imc-side-new:hover {
    filter: brightness(1.08);
}

html.imc-desktop .imc-side-new:active {
    transform: scale(0.98);
}

html.imc-desktop.imc-newchat-open .imc-dlg-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgb(8 14 30 / 45%);
    backdrop-filter: blur(2px);
}

html.imc-desktop #imc-panel-newchat:not([hidden]) {
    --imc-surface: light-dark(#ffffff, #141b2d);
    --imc-text: light-dark(#111827, #e8ecf4);
    --imc-muted: light-dark(#6b7280, #94a0b8);
    --imc-divider: light-dark(#eef1f6, #1f2940);
    --imc-pressed: light-dark(#f1f4fa, #1b2438);
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 1091;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 64px));
    border-radius: 20px;
    overflow: hidden;
    background: var(--imc-surface);
    color: var(--imc-text);
    box-shadow: 0 24px 60px rgb(8 14 30 / 35%);
    animation: imc-dlg-in 0.16s ease-out;
}

@keyframes imc-dlg-in {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.98);
    }
}

html.imc-desktop #imc-panel-newchat .imc-dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 2px 20px;
}

html.imc-desktop #imc-panel-newchat .imc-dlg-title {
    font-size: 18px;
    font-weight: 800;
}

html.imc-desktop #imc-panel-newchat .imc-dlg-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--imc-muted);
    font-size: 15px;
    cursor: pointer;
}

html.imc-desktop #imc-panel-newchat .imc-dlg-close:hover {
    background: var(--imc-pressed);
    color: var(--imc-text);
}

html.imc-desktop #imc-panel-newchat .imc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: 40px;
    margin: 8px 16px 4px;
    padding: 0 14px;
    border-radius: 20px;
    background: light-dark(#f1f4f9, #1c2539);
    color: var(--imc-muted);
}

html.imc-desktop #imc-panel-newchat .imc-search input {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--imc-text);
    font-size: 15px;
}

html.imc-desktop #imc-panel-newchat .imc-ptr {
    display: none;
}

html.imc-desktop #imc-panel-newchat .imc-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
}

html.imc-desktop #imc-panel-newchat.imc-group-mode .imc-list {
    padding-bottom: 76px;
}

html.imc-desktop #imc-panel-newchat .imc-section-title {
    padding: 14px 20px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--imc-muted);
}

html.imc-desktop #imc-panel-newchat .imc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 18px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    position: relative;
}

html.imc-desktop #imc-panel-newchat .imc-row:hover {
    background: var(--imc-pressed);
}

html.imc-desktop #imc-panel-newchat .imc-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

html.imc-desktop #imc-panel-newchat .imc-row-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-desktop #imc-panel-newchat .imc-row-subtitle {
    margin-top: 2px;
    font-size: 13px;
    color: var(--imc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-desktop #imc-panel-newchat .imc-online-text {
    color: #16a34a;
    font-weight: 600;
}

html.imc-desktop #imc-panel-newchat :is(.imc-avatar, .imc-action-icon) {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 15px;
    font-weight: 700;
}

html.imc-desktop #imc-panel-newchat .imc-avatar {
    border-radius: 50%;
    color: #fff;
    background: light-dark(#dbe3f1, #263049);
}

html.imc-desktop #imc-panel-newchat .imc-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

html.imc-desktop #imc-panel-newchat .imc-action-icon {
    border-radius: 12px;
    font-size: 18px;
    color: light-dark(var(--imc-brand), #8fb4ff);
    background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 12%));
}

html.imc-desktop #imc-panel-newchat .imc-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--imc-surface);
}

html.imc-desktop #imc-panel-newchat .imc-online.imc-away {
    background: #f59e0b;
}

html.imc-desktop #imc-panel-newchat .imc-check {
    display: none;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid light-dark(#c5cdd9, #3a4560);
    place-items: center;
    font-size: 13px;
    color: transparent;
}

html.imc-desktop #imc-panel-newchat.imc-group-mode .imc-person .imc-check {
    display: grid;
}

html.imc-desktop #imc-panel-newchat .imc-person.imc-selected {
    background: light-dark(rgb(31 79 174 / 6%), rgb(143 180 255 / 8%));
}

html.imc-desktop #imc-panel-newchat .imc-person.imc-selected .imc-check {
    border-color: transparent;
    background: light-dark(var(--imc-brand), #3b82f6);
    color: #fff;
}

html.imc-desktop #imc-panel-newchat .imc-start-bar:not([hidden]) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px;
    background: var(--imc-surface);
    box-shadow: 0 -6px 18px rgb(15 42 95 / 8%);
}

html.imc-desktop #imc-panel-newchat .imc-start-button {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

html.imc-desktop #imc-panel-newchat .imc-start-button:disabled {
    background: light-dark(#e3e8f0, #263049);
    color: var(--imc-muted);
    cursor: default;
}

html.imc-desktop #imc-panel-newchat .imc-empty {
    padding: 40px 32px;
    text-align: center;
    color: var(--imc-muted);
}

html.imc-desktop #imc-panel-newchat :is(.imc-empty-search[hidden], .imc-row[hidden], .imc-section[hidden]) {
    display: none !important;
}

html.imc-desktop #imc-panel-newchat .imc-skeleton :is(.imc-avatar, .imc-row-body) {
    background: var(--imc-divider);
}

html.imc-desktop #imc-panel-newchat .imc-skeleton .imc-row-body {
    height: 30px;
    border-radius: 8px;
}
/* ---------- Motion: screen transitions, new messages, swipe-back arrow ---------- */

@keyframes imc-in-right {
    from {
        transform: translateX(16%);
        opacity: 0.55;
    }
}

@keyframes imc-in-left {
    from {
        transform: translateX(-12%);
        opacity: 0.55;
    }
}

@keyframes imc-in-fade {
    from {
        opacity: 0.35;
    }
}

@keyframes imc-msg-in {
    from {
        transform: translateY(14px) scale(0.98);
        opacity: 0;
    }
}

/* Phone: deeper = from the right, back = from the left */
html.imc-mobile.imc-nav-fwd :is(.imc-panel:not([hidden]), #message_feed_container) {
    animation: imc-in-right 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.imc-mobile.imc-nav-back :is(.imc-panel:not([hidden]), #message_feed_container) {
    animation: imc-in-left 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.imc-mobile:is(.imc-nav-fwd, .imc-nav-back) #imc-title {
    animation: imc-in-fade 0.2s ease-out;
}

/* PC: switching conversations fades the new one in */
html:not(.imc-mobile).imc-nav-fwd #message_feed_container {
    animation: imc-in-fade 0.16s ease-out;
}

.message_row.imc-msg-new {
    animation: imc-msg-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: bottom center;
}

.imc-back-hint {
    position: fixed;
    left: 0;
    z-index: 200;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: light-dark(#ffffff, #1c2539);
    color: light-dark(#1f4fae, #8fb4ff);
    box-shadow: 0 4px 14px rgb(15 42 95 / 22%);
    font-size: 20px;
    opacity: 0;
    transform: translateX(-48px) scale(0.6);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.12s ease, color 0.12s ease;
}

.imc-back-hint.imc-armed {
    background: light-dark(#1f4fae, #5b8def);
    color: #ffffff;
}

/* Instant feedback when a list row or button is pressed */
html.imc-mobile :is(.imc-row, .imc-tab, .imc-chip, .imc-compose-btn, .imc-compose-more) {
    transition: background-color 0.12s ease, transform 0.12s ease;
}

/* Pressing reacts at once (the fade is only for letting go) */
html.imc-mobile :is(.imc-row, .imc-tab, .imc-chip, .imc-compose-btn, .imc-compose-more):active {
    transition-duration: 0s;
}

html.imc-mobile :is(.imc-row, .imc-tab, .imc-chip) {
    touch-action: manipulation;
}

html.imc-mobile :is(.imc-tab, .imc-chip):active {
    transform: scale(0.94);
}

/* "Reduce motion" on the device (or ?imc-motion=off); app.js sets the class */
html.imc-no-motion .message_row.imc-msg-new,
html.imc-no-motion:is(.imc-nav-fwd, .imc-nav-back) :is(.imc-panel, #message_feed_container, #imc-title) {
    animation: none !important;
}

html.imc-no-motion .imc-back-hint {
    transition: none;
}
/* ---------- Finger-sized chips on the phone (design check v1.20) ---------- */
@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile .imc-qr-chip {
        height: 36px;
        border-radius: 18px;
        padding: 0 14px;
    }

    html.imc-mobile .imc-chip {
        height: 36px;
        border-radius: 18px;
    }
}
/* ---------- Photo viewer (phone) ---------- */
.imc-viewer[hidden] {
    display: none !important;
}

.imc-viewer {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgb(0 0 0 / 100%);
    opacity: 0;
    transition: opacity 0.18s ease;
    touch-action: none;
    overscroll-behavior: contain;
}

.imc-viewer.imc-open {
    opacity: 1;
}

.imc-viewer-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.imc-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.imc-viewer-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: calc(8px + env(safe-area-inset-top)) 8px 18px;
    background: linear-gradient(rgb(0 0 0 / 60%), transparent);
    color: #ffffff;
    transition: opacity 0.18s ease;
}

.imc-viewer-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff !important;
    font-size: 20px;
    text-decoration: none !important;
}

.imc-viewer-btn:active {
    background: rgb(255 255 255 / 15%);
}

.imc-viewer-info {
    flex: 1;
    min-width: 0;
}

.imc-viewer-who {
    font-size: 15.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imc-viewer-when {
    font-size: 12.5px;
    opacity: 0.8;
}

.imc-viewer-count {
    position: absolute;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 12px;
    background: rgb(0 0 0 / 45%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.18s ease;
}

.imc-viewer-count:empty {
    display: none;
}

.imc-viewer.imc-viewer-bare :is(.imc-viewer-bar, .imc-viewer-count),
.imc-viewer.imc-viewer-zoomed .imc-viewer-count {
    opacity: 0;
    pointer-events: none;
}

/* ---------- "Down" button with the number of new messages below ---------- */
#scroll-to-bottom-button {
    position: relative;
    overflow: visible !important;
}

.imc-new-badge[hidden] {
    display: none !important;
}

.imc-new-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: light-dark(#1f4fae, #5b8def);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px light-dark(#ffffff, #141b2d);
    pointer-events: none;
}

html.imc-no-motion .imc-viewer,
html.imc-no-motion .imc-viewer-bar {
    transition: none;
}
/* ---------- Chat polish (v1.21): background, grouped bubbles, ticks, reactions ---------- */

/* A quiet dotted pattern behind conversations, like a messaging app.
   Fixed to the window, so it does not move while you scroll. */
html:is(.imc-mobile, .imc-desktop).imc-view-conversation #main_div {
    background-color: var(--imc-chat-bg) !important;
    background-image:
        radial-gradient(light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 6%)) 1.2px, transparent 1.6px),
        radial-gradient(light-dark(rgb(31 79 174 / 4%), rgb(143 180 255 / 3.5%)) 1.2px, transparent 1.6px) !important;
    background-size: 26px 26px, 26px 26px !important;
    background-position: 0 0, 13px 13px !important;
    background-attachment: fixed !important;
}

/* Messages in a row from the same person read as one group:
   the corners where two bubbles meet are tighter. */
:is(html.imc-mobile, html.imc-desktop) .message_row:not(.messagebox-includes-sender):not([data-imc-mine]) .messagebox-content {
    border-top-left-radius: 6px;
}

:is(html.imc-mobile, html.imc-desktop) .message_row:not([data-imc-mine]):has(+ .message_row:not(.messagebox-includes-sender)) .messagebox-content {
    border-bottom-left-radius: 6px;
}

:is(html.imc-mobile, html.imc-desktop) .message_row[data-imc-mine]:not(.messagebox-includes-sender) .messagebox-content {
    border-top-right-radius: 6px;
}

:is(html.imc-mobile, html.imc-desktop) .message_row[data-imc-mine]:has(+ .message_row[data-imc-mine]:not(.messagebox-includes-sender)) .messagebox-content {
    border-bottom-right-radius: 6px;
}

/* Your bubbles: a slight depth instead of a flat block */
:is(html.imc-mobile, html.imc-desktop) [data-imc-mine] .messagebox-content {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%));
    box-shadow: 0 1px 2px rgb(15 42 95 / 18%);
}

/* Ticks next to the time in your bubbles (direct messages):
   one = sent, two light-blue = read */
html.imc-dm-ticks [data-imc-mine] .messagebox-content .message-time::after {
    content: "\2713";
    display: inline-block;
    margin-left: 4px;
    font-weight: 700;
}

html.imc-dm-ticks.imc-dm-seen [data-imc-mine] .messagebox-content .message-time::after {
    content: "\2713\2713";
    letter-spacing: -0.28em;
    padding-right: 0.28em;
    color: #9fd8ff;
}

html.imc-dm-ticks.imc-dm-seen [data-imc-mine] .messagebox-content .message-time {
    opacity: 0.9;
}

/* One-on-one chats: the ticks say it, no extra "Seen" line under the bubble */
html.imc-view-dm1 .imc-receipt {
    display: none !important;
}

/* Reactions: small rounded pills under the bubble */
:is(html.imc-mobile, html.imc-desktop) .message_reactions .message_reaction {
    height: 26px;
    padding: 0 8px !important;
    border-radius: 13px !important;
    border: 1px solid light-dark(rgb(15 42 95 / 10%), rgb(255 255 255 / 10%)) !important;
    background: light-dark(#f4f7fc, #232d45) !important;
    box-shadow: none !important;
}

:is(html.imc-mobile, html.imc-desktop) .message_row:not([data-imc-mine]) .message_reactions .message_reaction.reacted {
    border-color: light-dark(rgb(31 79 174 / 45%), rgb(143 180 255 / 45%)) !important;
    background: light-dark(rgb(31 79 174 / 9%), rgb(143 180 255 / 14%)) !important;
}

:is(html.imc-mobile, html.imc-desktop) .message_reactions .message_reaction .message_reaction_count {
    font-size: 12.5px;
    font-weight: 700;
}

/* Date pills: lighter, sentence-case look */
html.imc-view-conversation .recipient_row_date,
html.imc-mobile .date-divider-content {
    letter-spacing: 0.02em;
}

html.imc-view-conversation .message_header .message-header-contents {
    backdrop-filter: none;
    box-shadow: 0 1px 2px rgb(15 42 95 / 12%) !important;
}

/* Links and photo previews inside bubbles: rounded and tidy */
:is(html.imc-mobile, html.imc-desktop) .messagebox-content :is(.message_inline_image, .message_embed, .message_inline_video) {
    border-radius: 12px;
    overflow: hidden;
}
/* Zulip gives the time a ~36px line height, which made every bubble tall.
   A normal line keeps one-line bubbles compact, like a messaging app. */
:is(html.imc-mobile, html.imc-desktop) .messagebox-content .message-time {
    line-height: 1.35 !important;
    height: auto !important;
}
/* Phone: the time sits next to the text (bottom right), not on a line of
   its own, so a short message is a compact one-line bubble like WhatsApp. */
@media (max-width: 767px) and (pointer: coarse) {
    html.imc-mobile .messagebox-content {
        grid-template-areas:
            "sender sender"
            "message time"
            "more more"
            "reactions reactions"
            "reminders reminders"
            "controls controls" !important;
        column-gap: 8px;
        min-width: 0;
    }

    html.imc-mobile .messagebox-content .message-time {
        align-self: end;
        margin: 0 0 -1px !important;
    }

    html.imc-mobile .selected_message .messagebox-content .message_controls {
        justify-self: end;
        margin-top: 4px;
    }
}
/* ---------- Settings, channel browser, drafts: same look as the app ---------- */

:is(html.imc-desktop, html.imc-mobile) {
    accent-color: var(--imc-brand);
}

/* The window */
:is(html.imc-desktop, html.imc-mobile) .overlay-content.overlay-container,
:is(html.imc-desktop, html.imc-mobile) #settings_page {
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: var(--imc-surface, #fff) !important;
    box-shadow: 0 24px 60px rgb(8 14 30 / 35%) !important;
}

html.imc-mobile #settings_page {
    border-radius: 0 !important;
}

/* Header strip in brand colours */
:is(html.imc-desktop, html.imc-mobile) #settings_page .settings-header,
:is(html.imc-desktop, html.imc-mobile) #settings_page .tab-container {
    background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand) 60%, var(--imc-brand-2)) !important;
    border: 0 !important;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .settings-header h1,
:is(html.imc-desktop, html.imc-mobile) #settings_page .settings-header .exit,
:is(html.imc-desktop, html.imc-mobile) #settings_page .settings-header .exit * {
    color: #fff !important;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .settings-header h1 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Personal | Organization: pill switch on the blue strip */
:is(html.imc-desktop, html.imc-mobile) #settings_page .tab-switcher {
    padding: 3px;
    border: 0 !important;
    border-radius: 18px;
    background: rgb(255 255 255 / 16%) !important;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .tab-switcher .ind-tab {
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: rgb(255 255 255 / 85%) !important;
    font-weight: 600;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .tab-switcher .ind-tab.selected {
    background: #fff !important;
    color: var(--imc-brand) !important;
    box-shadow: 0 2px 6px rgb(8 14 30 / 20%);
}

/* Left menu: rounded rows, icon tiles, active with a blue bar */
:is(html.imc-desktop, html.imc-mobile) #settings_page .sidebar {
    background: light-dark(#f6f8fc, #121a2b) !important;
    border: 0 !important;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .sidebar-item {
    position: relative;
    margin: 2px 8px;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 12px;
    font-weight: 500;
    transition: background-color 0.12s ease;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .sidebar-item:hover {
    background: light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 9%)) !important;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .sidebar-item.active {
    background: light-dark(rgb(31 79 174 / 12%), rgb(59 130 246 / 22%)) !important;
    color: light-dark(var(--imc-brand), #ffffff) !important;
    font-weight: 700;
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .sidebar-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--imc-brand);
}

:is(html.imc-desktop, html.imc-mobile) #settings_page .sidebar-item-icon {
    width: 28px;
    height: 28px;
    display: inline-grid !important;
    place-items: center;
    margin-right: 6px;
    border-radius: 9px;
    background: light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 12%));
    color: light-dark(var(--imc-brand), #8fb4ff) !important;
    font-size: 14px !important;
}

/* Section titles */
:is(html.imc-desktop, html.imc-mobile) #settings_content h3,
:is(html.imc-desktop, html.imc-mobile) #settings_content .settings-section-title {
    font-weight: 800;
    color: light-dark(#111827, #e8ecf4);
}

/* Inputs, selects, text areas */
:is(html.imc-desktop, html.imc-mobile) #settings_content :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea),
:is(html.imc-desktop, html.imc-mobile) #settings_content .settings_text_input,
:is(html.imc-desktop, html.imc-mobile) #settings_content .dropdown-widget-button {
    min-height: 38px;
    border-radius: 10px !important;
    border: 1px solid light-dark(#d9e0ec, #2c3650) !important;
    background-color: light-dark(#ffffff, #1a2234) !important;
    box-shadow: none !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

:is(html.imc-desktop, html.imc-mobile) #settings_content :is(input, select, textarea):focus {
    border-color: var(--imc-brand) !important;
    box-shadow: 0 0 0 3px light-dark(rgb(31 79 174 / 15%), rgb(143 180 255 / 20%)) !important;
    outline: 0 !important;
}

/* Brand buttons (Save changes etc.) */
:is(html.imc-desktop, html.imc-mobile) .overlay-content .action-button-solid-brand,
:is(html.imc-desktop, html.imc-mobile) #settings_page .action-button-solid-brand {
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--imc-brand), var(--imc-brand-2)) !important;
    box-shadow: 0 3px 10px rgb(31 79 174 / 25%);
}

/* Theme picker (system / light / dark): a rounded segmented switch */
:is(html.imc-desktop, html.imc-mobile) #settings_content .tab-picker {
    padding: 3px;
    border: 0 !important;
    border-radius: 12px !important;
    background: light-dark(#eef2f8, #1c2539) !important;
    overflow: hidden;
}

:is(html.imc-desktop, html.imc-mobile) #settings_content .tab-picker label,
:is(html.imc-desktop, html.imc-mobile) #settings_content .tab-picker .tab-option-content {
    border: 0 !important;
    border-radius: 9px !important;
}

:is(html.imc-desktop, html.imc-mobile) #settings_content .tab-picker input:checked + .tab-option-content,
:is(html.imc-desktop, html.imc-mobile) #settings_content .tab-picker .selected {
    background: var(--imc-surface, #fff) !important;
    color: var(--imc-brand) !important;
    box-shadow: 0 1px 4px rgb(8 14 30 / 15%);
}

/* Boxes (emoji theme etc.) and the font size / spacing steppers */
:is(html.imc-desktop, html.imc-mobile) #settings_content .settings-highlight-box,
:is(html.imc-desktop, html.imc-mobile) #settings_content .information-density-settings > *,
:is(html.imc-desktop, html.imc-mobile) #settings_content .settings-section .alert,
:is(html.imc-desktop, html.imc-mobile) #settings_content table {
    border-radius: 12px !important;
    border-color: light-dark(#d9e0ec, #2c3650) !important;
    overflow: hidden;
}

:is(html.imc-desktop, html.imc-mobile) #settings_content .action-button-subtle-brand,
:is(html.imc-desktop, html.imc-mobile) #settings_content .action-button-subtle-neutral {
    border-radius: 12px !important;
}

/* Toggle-like checkboxes a little bigger */
:is(html.imc-desktop, html.imc-mobile) #settings_content input[type="checkbox"] {
    width: 17px;
    height: 17px;
}

/* Profile photo box */
:is(html.imc-desktop, html.imc-mobile) #settings_content .image-block,
:is(html.imc-desktop, html.imc-mobile) #settings_content .avatar-settings-widget img {
    border-radius: 18px !important;
}

/* The dimmed page behind the window */
:is(html.imc-desktop, html.imc-mobile) .overlay.show {
    background: rgb(8 14 30 / 45%) !important;
    backdrop-filter: blur(3px);
}

/* ---------- Menus: Zulip's popovers + the PC right-click menu ---------- */

/* ===== Zulip menus (message ⋮, gear, your profile, sidebar ⋮) ===== */
:is(html.imc-desktop, html.imc-mobile) .tippy-box:has(.popover-menu) {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--imc-surface, #fff) !important;
    box-shadow: 0 12px 36px rgb(8 14 30 / 22%), 0 2px 6px rgb(8 14 30 / 10%) !important;
}

:is(html.imc-desktop, html.imc-mobile) .tippy-box:has(.popover-menu) .tippy-arrow {
    display: none;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu {
    padding: 6px !important;
    min-width: 230px;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-size: 14.5px;
    font-weight: 500;
    transition: background-color 0.1s ease;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-link:hover,
:is(html.imc-desktop, html.imc-mobile) .popover-menu-link:focus-visible {
    background: light-dark(rgb(31 79 174 / 9%), rgb(143 180 255 / 12%)) !important;
    outline: 0;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-icon {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 8px;
    background: light-dark(rgb(31 79 174 / 9%), rgb(143 180 255 / 12%));
    color: light-dark(var(--imc-brand), #8fb4ff) !important;
    font-size: 15px !important;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-label {
    flex: 1 1 auto;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-hotkey-hint {
    padding: 1px 6px;
    border-radius: 6px;
    background: light-dark(#eef2f8, #1c2539);
    color: var(--imc-muted, #6b7280);
    font-size: 11.5px;
    font-weight: 600;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-separator {
    margin: 4px 8px !important;
    border-color: light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 8%)) !important;
}

/* Delete-style items in red */
:is(html.imc-desktop, html.imc-mobile) .popover-menu-link:is(.delete_message, .popover_delete_message, [class*="delete"]) {
    color: #dc2626 !important;
}

:is(html.imc-desktop, html.imc-mobile) .popover-menu-link:is(.delete_message, .popover_delete_message, [class*="delete"]) .popover-menu-icon {
    background: rgb(220 38 38 / 10%);
    color: #dc2626 !important;
}

/* Your profile card in the menu */
:is(html.imc-desktop, html.imc-mobile) .popover-menu-user-info,
:is(html.imc-desktop, html.imc-mobile) .personal-menu-header {
    border-radius: 12px;
}

/* ===== PC: the phone's action sheet as a menu where you right-click ===== */
@media (min-width: 768px), (pointer: fine) {
    html.imc-desktop .imc-sheet-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: transparent;
    }

    html.imc-desktop .imc-sheet {
        position: fixed;
        left: var(--imc-x, 50%);
        top: var(--imc-y, 30%);
        right: auto;
        bottom: auto;
        width: 300px;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        padding: 8px;
        border-radius: 16px;
        background: var(--imc-surface, #fff);
        color: light-dark(#111827, #e8ecf4);
        box-shadow: 0 12px 36px rgb(8 14 30 / 25%), 0 2px 6px rgb(8 14 30 / 10%);
        opacity: 0;
        transform: scale(0.96);
        transform-origin: top left;
        transition: opacity 0.12s ease, transform 0.12s ease;
    }

    html.imc-desktop .imc-open .imc-sheet {
        opacity: 1;
        transform: scale(1);
    }

    html.imc-desktop .imc-sheet-handle {
        display: none;
    }

    html.imc-desktop .imc-sheet-reactions {
        display: flex;
        justify-content: space-between;
        padding: 4px 4px 10px;
        border-bottom: 1px solid light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 8%));
    }

    html.imc-desktop .imc-sheet-reaction {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: light-dark(#f1f4f9, #1c2539);
        font-size: 21px;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.1s ease;
    }

    html.imc-desktop .imc-sheet-reaction:hover {
        transform: scale(1.18);
    }

    html.imc-desktop .imc-sheet-reaction.imc-reacted {
        box-shadow: inset 0 0 0 2px var(--imc-brand);
    }

    html.imc-desktop .imc-sheet-actions {
        display: flex;
        flex-direction: column;
        padding-top: 6px;
    }

    html.imc-desktop .imc-sheet-action {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 40px;
        padding: 0 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: inherit;
        font-size: 14.5px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    html.imc-desktop .imc-sheet-action:hover {
        background: light-dark(rgb(31 79 174 / 9%), rgb(143 180 255 / 12%));
    }

    html.imc-desktop .imc-sheet-action .zulip-icon {
        width: 20px;
        color: light-dark(var(--imc-brand), #8fb4ff);
        text-align: center;
    }

    html.imc-desktop .imc-sheet-action.imc-danger,
    html.imc-desktop .imc-sheet-action.imc-danger .zulip-icon {
        color: #dc2626;
    }

    html.imc-desktop .imc-sheet-title {
        padding: 2px 6px 6px;
        font-size: 15px;
        font-weight: 800;
    }

    html.imc-desktop .message_row.imc-pressed .messagebox-content {
        box-shadow: 0 0 0 2px light-dark(rgb(59 130 246 / 35%), rgb(143 180 255 / 35%));
    }

    /* Toasts on PC: bottom centre */
    html.imc-desktop .imc-toast {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 110px;
        z-index: 1001;
        padding: 10px 18px;
        border-radius: 20px;
        background: rgb(17 24 39 / 92%);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        transform: translate(-50%, 12px);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
    }

    html.imc-desktop .imc-toast.imc-toast-in {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ---------- PC: icon rail + the list docked next to it (app.js "rail") ----------
   Rail (Chat, Channels, Activity, Views | New chat, theme) on the far left,
   then the chosen list, then the conversation, like Teams / WhatsApp Desktop.
   Off for one computer with ?imc-rail=off. */

#imc-rail,
#imc-dock-head {
    display: none;
}

html.imc-rail {
    --imc-rail-w: 68px;
    --imc-dock-head-h: 54px;
    --imc-dock-bg: light-dark(#ffffff, #141b2d);
    --imc-dock-text: light-dark(#111827, #e8ecf4);
    --imc-dock-muted: light-dark(#6b7280, #94a0b8);
    --imc-dock-line: light-dark(#eef1f6, #1f2940);
    --imc-dock-hover: light-dark(#f3f6fb, #1b2438);
    --imc-dock-tint: light-dark(rgb(31 79 174 / 9%), rgb(143 180 255 / 12%));
    /* Zulip sizes the left column, the chat and the typing bar from this:
       the rail plus the list, and everything moves over by itself. The list
       is about 24% of the window (320-480px) unless dragged wider or
       narrower: --imc-dock-w on <html> (app.js, saved per computer). */
    --left-sidebar-width: calc(var(--imc-dock-w, clamp(320px, 24vw, 480px)) + var(--imc-rail-w));
}

/* ===== The rail ===== */
html.imc-rail #imc-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: fixed;
    left: 0;
    top: var(--imc-top, 40px);
    bottom: 0;
    z-index: 101; /* over Zulip's sidebar (100), under its top bar (102) */
    box-sizing: border-box;
    width: var(--imc-rail-w);
    padding: 10px 0 12px;
    background: light-dark(#edf1f8, #0b111f);
    border-right: 1px solid light-dark(rgb(15 42 95 / 8%), rgb(255 255 255 / 6%));
}

html.imc-rail .imc-rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 58px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: light-dark(#5b6476, #9aa4ba);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

html.imc-rail .imc-rail-item .zulip-icon {
    font-size: 19px;
}

html.imc-rail .imc-rail-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

html.imc-rail .imc-rail-item:hover {
    background: light-dark(rgb(31 79 174 / 7%), rgb(143 180 255 / 8%));
    color: light-dark(#111827, #e8ecf4);
}

html.imc-rail .imc-rail-item.active {
    background: light-dark(#ffffff, rgb(143 180 255 / 12%));
    color: light-dark(var(--imc-brand), #8fb4ff);
    box-shadow: light-dark(0 1px 3px rgb(15 42 95 / 12%), none);
}

html.imc-rail .imc-rail-item.active .imc-rail-label {
    font-weight: 800;
}

/* Blue bar on the rail's edge next to the chosen item */
html.imc-rail .imc-rail-item.active::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: light-dark(var(--imc-brand), #8fb4ff);
}

html.imc-rail .imc-rail-badge {
    position: absolute;
    top: 3px;
    right: 7px;
    min-width: 18px;
    height: 18px;
    box-sizing: border-box;
    padding: 0 5px;
    border-radius: 9px;
    background: #e5484d;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px light-dark(#edf1f8, #0b111f);
}

html.imc-rail .imc-rail-badge[hidden] {
    display: none;
}

html.imc-rail .imc-rail-space {
    flex: 1;
}

html.imc-rail .imc-rail-new {
    color: light-dark(var(--imc-brand), #8fb4ff);
}

/* The rail replaces these */
html.imc-rail .imc-side-new,
html.imc-rail #top_navbar .imc-theme-btn {
    display: none !important;
}

/* Full width like a desktop app. Without "fluid layout width" Zulip centres
   the app on wide screens, which would move its columns away from the rail
   and the docked list (same as Zulip's own fluid_layout_width setting). */
html.imc-rail body :is(#compose-container, .app .app-main, .header-main) {
    max-width: none !important;
}

/* "Views": Zulip's own sidebar, next to the rail */
html.imc-rail #left-sidebar {
    box-sizing: border-box;
    padding-left: calc(var(--imc-rail-w) + 10px) !important;
}

/* A list is docked: Zulip's sidebar under it must never show beside it */
html.imc-rail.imc-dock-open #left-sidebar {
    visibility: hidden;
}

/* ===== The docked list: header + panel ===== */
html.imc-rail.imc-dock-open #imc-dock-head {
    display: flex;
    align-items: center;
    gap: 4px;
    position: fixed;
    left: var(--imc-rail-w);
    top: var(--imc-top, 40px);
    z-index: 101;
    box-sizing: border-box;
    width: calc(var(--left-sidebar-width) - var(--imc-rail-w));
    height: var(--imc-dock-head-h);
    padding: 0 10px 0 16px;
    background: var(--imc-dock-bg);
    color: var(--imc-dock-text);
    border-right: 1px solid var(--imc-dock-line);
}

html.imc-rail .imc-dock-title {
    flex: 1;
    min-width: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-rail .imc-dock-actions {
    display: flex;
    gap: 2px;
}

html.imc-rail .imc-dock-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--imc-dock-muted);
    font-size: 16px;
    cursor: pointer;
}

html.imc-rail .imc-dock-btn:hover {
    background: var(--imc-dock-hover);
    color: var(--imc-dock-text);
}

html.imc-rail .imc-dock-back {
    margin-left: -8px;
}

html.imc-rail .imc-dock-back[hidden] {
    display: none;
}

html.imc-rail .imc-panel.imc-docked:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: var(--imc-rail-w);
    top: calc(var(--imc-top, 40px) + var(--imc-dock-head-h));
    bottom: 0;
    z-index: 101;
    box-sizing: border-box;
    width: calc(var(--left-sidebar-width) - var(--imc-rail-w));
    background: var(--imc-dock-bg);
    color: var(--imc-dock-text);
    border-right: 1px solid var(--imc-dock-line);
}

/* Zulip's sidebar hidden (☰ button or a narrow window): the chat starts after the rail */
html.imc-rail.imc-left-hidden :is(.app-main .column-middle, #compose-content) {
    /* --imc-main-off: where Zulip's centred app starts (app.js measures it) */
    margin-left: max(7px, calc(var(--imc-rail-w) + 8px - var(--imc-main-off, 0px))) !important;
}

/* Window too narrow for the list column: hidden, or over the chat when asked */
html.imc-rail.imc-left-hidden:not(.imc-dock-peek) :is(#imc-dock-head, .imc-panel.imc-docked) {
    display: none !important;
}

html.imc-rail.imc-left-hidden.imc-dock-peek :is(#imc-dock-head, .imc-panel.imc-docked:not([hidden])) {
    width: 340px;
}

html.imc-rail.imc-left-hidden.imc-dock-peek .imc-panel.imc-docked:not([hidden]) {
    box-shadow: 10px 0 30px rgb(8 14 30 / 18%);
}

/* ===== Inside the list ===== */
html.imc-rail .imc-docked .imc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: 38px;
    margin: 2px 14px 8px;
    padding: 0 14px;
    border-radius: 19px;
    background: light-dark(#f1f4f9, #1c2539);
    color: var(--imc-dock-muted);
}

html.imc-rail .imc-docked .imc-search input {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--imc-dock-text);
    font-size: 14.5px;
}

html.imc-rail .imc-docked .imc-ptr,
html.imc-rail .imc-docked .imc-fab,
html.imc-rail .imc-docked .imc-swipe-action {
    display: none !important;
}

html.imc-rail .imc-docked .imc-chips {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 0 14px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

html.imc-rail .imc-docked .imc-chip {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: light-dark(#eef2f8, #1c2539);
    color: light-dark(#374151, #c3cbe0);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

html.imc-rail .imc-docked .imc-chip:hover {
    background: light-dark(#e3e9f3, #232e45);
}

html.imc-rail .imc-docked .imc-chip.imc-chip-on {
    background: light-dark(rgb(31 79 174 / 14%), rgb(143 180 255 / 20%));
    color: light-dark(var(--imc-brand), #8fb4ff);
}

html.imc-rail .imc-docked .imc-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 12px;
}

html.imc-rail .imc-docked .imc-section-title {
    padding: 14px 10px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--imc-dock-muted);
}

/* Rows: rounded, hover, and the open conversation highlighted */
html.imc-rail .imc-docked .imc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    position: relative;
}

html.imc-rail .imc-docked .imc-row:hover {
    background: var(--imc-dock-hover);
}

html.imc-rail .imc-docked .imc-current > .imc-row,
html.imc-rail .imc-docked .imc-row.imc-current {
    background: var(--imc-dock-tint);
}

html.imc-rail .imc-docked .imc-current > .imc-row .imc-row-title,
html.imc-rail .imc-docked .imc-row.imc-current .imc-row-title {
    color: light-dark(var(--imc-brand), #a9c4ff);
}

html.imc-rail .imc-docked .imc-swipe-wrap[hidden],
html.imc-rail .imc-docked :is(.imc-empty-search[hidden], .imc-row[hidden], .imc-section[hidden]) {
    display: none !important;
}

html.imc-rail .imc-docked .imc-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

html.imc-rail .imc-docked .imc-row-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-rail .imc-docked .imc-row-subtitle {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--imc-dock-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-rail .imc-docked .imc-has-unread .imc-row-title {
    font-weight: 800;
}

html.imc-rail .imc-docked .imc-has-unread .imc-row-subtitle {
    color: var(--imc-dock-text);
    font-weight: 500;
}

html.imc-rail .imc-docked .imc-online-text {
    color: #16a34a !important;
    font-weight: 600;
}

html.imc-rail .imc-docked .imc-italic {
    font-style: italic;
}

html.imc-rail .imc-docked .imc-wrap {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html.imc-rail .imc-docked .imc-row-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    align-self: stretch;
}

html.imc-rail .imc-docked .imc-time {
    font-size: 11.5px;
    color: var(--imc-dock-muted);
}

html.imc-rail .imc-docked .imc-has-unread .imc-time {
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-weight: 700;
}

html.imc-rail .imc-docked .imc-unread {
    min-width: 20px;
    height: 20px;
    box-sizing: border-box;
    padding: 0 6px;
    border-radius: 10px;
    background: light-dark(var(--imc-brand), #3b82f6);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

html.imc-rail .imc-docked .imc-unread[hidden] {
    display: none;
}

html.imc-rail .imc-docked .imc-muted {
    opacity: 0.55;
}

html.imc-rail .imc-docked .imc-pin {
    font-size: 12px;
    line-height: 1;
    color: light-dark(#f59e0b, #fbbf24);
}

html.imc-rail .imc-docked .imc-sub-topic {
    font-weight: 700;
    color: light-dark(#374151, #c3cbe0);
}

html.imc-rail .imc-docked .imc-has-unread .imc-sub-topic {
    color: light-dark(var(--imc-brand), #8fb4ff);
}

/* Photos, channel tiles, icons */
html.imc-rail .imc-docked :is(.imc-avatar, .imc-channel-icon, .imc-action-icon) {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 16px;
    font-weight: 700;
}

html.imc-rail .imc-docked .imc-avatar {
    border-radius: 50%;
    color: #fff;
    background: light-dark(#dbe3f1, #263049);
}

html.imc-rail .imc-docked .imc-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

html.imc-rail .imc-docked .imc-avatar-group {
    background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand-2));
    font-size: 19px;
}

html.imc-rail .imc-docked .imc-avatar-sm {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 14px;
}

html.imc-rail .imc-docked .imc-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--imc-dock-bg);
}

html.imc-rail .imc-docked .imc-online.imc-away {
    background: #f59e0b;
}

html.imc-rail .imc-docked .imc-channel-icon {
    border-radius: 12px;
    font-size: 18px;
    color: var(--imc-channel-color);
    background: color-mix(in srgb, var(--imc-channel-color) 16%, transparent);
}

html.imc-rail .imc-docked .imc-action-icon {
    border-radius: 12px;
    font-size: 18px;
    color: light-dark(var(--imc-brand), #8fb4ff);
    background: var(--imc-dock-tint);
}

/* Activity: small badge on the photo says what happened */
html.imc-rail .imc-docked .imc-activity-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--imc-dock-bg);
}

html.imc-rail .imc-docked .imc-badge-mention {
    background: #ea580c;
}

html.imc-rail .imc-docked .imc-badge-reaction {
    background: #db2777;
}

html.imc-rail .imc-docked .imc-wrap-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html.imc-rail .imc-docked .imc-activity .imc-row-title {
    font-weight: 500;
}

html.imc-rail .imc-docked .imc-activity.imc-has-unread .imc-row-title {
    font-weight: 800;
}

/* "Online now" strip at the top of Chat */
html.imc-rail .imc-docked .imc-quick-people {
    margin: 0 -8px 4px;
    padding: 2px 0 8px;
    border-bottom: 1px solid var(--imc-dock-line);
}

html.imc-rail .imc-docked .imc-quick-title {
    padding: 4px 18px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--imc-dock-muted);
}

html.imc-rail .imc-docked .imc-quick-row {
    display: flex;
    gap: 2px;
    padding: 0 10px;
    overflow-x: auto;
    scrollbar-width: none; /* scrolls with the wheel (app.js) or a trackpad */
}

html.imc-rail .imc-docked .imc-quick-person {
    flex: 0 0 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

html.imc-rail .imc-docked .imc-quick-person:hover {
    background: var(--imc-dock-hover);
}

html.imc-rail .imc-docked .imc-avatar-quick {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
}

html.imc-rail .imc-docked .imc-quick-name {
    max-width: 58px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A channel's topics: header with its tile, then the buttons */
html.imc-rail .imc-docked .imc-channel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 8px;
}

html.imc-rail .imc-docked .imc-channel-icon-lg {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 21px;
}

html.imc-rail .imc-docked .imc-channel-head-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

html.imc-rail .imc-docked .imc-head-actions {
    display: flex;
    gap: 6px;
    padding: 2px 10px 6px;
}

html.imc-rail .imc-docked .imc-pill-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid light-dark(rgb(31 79 174 / 22%), rgb(143 180 255 / 25%));
    background: transparent;
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

html.imc-rail .imc-docked .imc-pill-button:hover {
    background: var(--imc-dock-tint);
}

html.imc-rail .imc-docked .imc-pill-button.imc-primary {
    border-color: transparent;
    background: light-dark(var(--imc-brand), #3b82f6);
    color: #fff;
}

html.imc-rail .imc-docked .imc-wide-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 4px);
    height: 40px;
    margin: 10px 2px;
    border: 1px dashed light-dark(rgb(31 79 174 / 30%), rgb(143 180 255 / 30%));
    border-radius: 12px;
    background: transparent;
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

html.imc-rail .imc-docked .imc-wide-button:hover {
    background: var(--imc-dock-tint);
}

/* Members: the selection circles are for group mode only */
html.imc-rail .imc-docked .imc-check {
    display: none;
}

html.imc-rail .imc-docked .imc-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--imc-dock-muted);
    font-size: 14px;
    line-height: 1.5;
}

html.imc-rail .imc-docked .imc-skeleton :is(.imc-avatar, .imc-row-body) {
    background: var(--imc-dock-line);
}

html.imc-rail .imc-docked .imc-skeleton .imc-row-body {
    height: 32px;
    border-radius: 8px;
}

/* ===== Welcome screen next to the list (until a chat is picked) ===== */
#imc-home {
    display: none;
}

html.imc-rail.imc-home-on #imc-home:not([hidden]) {
    display: grid;
    place-items: center;
    position: fixed;
    top: var(--imc-top, 40px);
    bottom: 0;
    z-index: 50; /* over Zulip's Recent table and its typing bar (4) */
    box-sizing: border-box;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 38%, light-dark(rgb(59 130 246 / 10%), rgb(59 130 246 / 12%)), transparent 55%),
        var(--imc-chat-bg, light-dark(#eef2f8, #0b101c));
    color: var(--imc-dock-text);
}

/* Nothing of the Recent view peeks through or stays in the header */
html.imc-rail.imc-home-on #compose,
html.imc-rail.imc-home-on #message_view_header,
html.imc-rail.imc-home-on #imc-title {
    visibility: hidden;
}

html.imc-rail .imc-home-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 460px;
    text-align: center;
}

html.imc-rail .imc-home-logo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    box-shadow: 0 12px 30px rgb(15 42 95 / 22%);
}

html.imc-rail .imc-home-title {
    margin-top: 20px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}


html.imc-rail .imc-home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

html.imc-rail .imc-home-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid light-dark(rgb(31 79 174 / 18%), rgb(143 180 255 / 22%));
    border-radius: 21px;
    background: var(--imc-dock-bg);
    color: light-dark(var(--imc-brand), #a9c4ff);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

html.imc-rail .imc-home-btn:hover {
    background: var(--imc-dock-hover);
}

html.imc-rail .imc-home-btn:active {
    transform: scale(0.98);
}

html.imc-rail .imc-home-btn.imc-home-primary {
    border-color: transparent;
    background: light-dark(var(--imc-brand), #3b82f6);
    color: #fff;
    box-shadow: 0 6px 16px rgb(31 79 174 / 25%);
}

html.imc-rail .imc-home-btn.imc-home-primary:hover {
    filter: brightness(1.08);
}

/* ===== Drag the list's right edge to resize it ===== */
#imc-dock-resize {
    display: none;
}

html.imc-rail:not(.imc-left-hidden) #imc-dock-resize {
    display: block;
    position: fixed;
    top: var(--imc-top, 40px);
    bottom: 0;
    left: calc(var(--left-sidebar-width) - 4px);
    z-index: 102;
    width: 8px;
    cursor: col-resize;
}

html.imc-rail #imc-dock-resize::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    border-radius: 1px;
    background: transparent;
    transition: background-color 0.15s ease;
}

html.imc-rail #imc-dock-resize:hover::after,
html.imc-rail.imc-resizing #imc-dock-resize::after {
    background: light-dark(var(--imc-brand), #8fb4ff);
}

html.imc-resizing,
html.imc-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ===== Chat header above the messages (app.js refreshChatHead) ===== */
#imc-chat-head-row {
    display: none;
}

html.imc-rail.imc-chat-head-on {
    --imc-chat-head-h: 62px;
    /* Zulip starts the messages and the sticky date/topic bars below this */
    --navbar-fixed-height: calc(var(--header-height) + var(--navbar-alerts-wrapper-height) + var(--imc-chat-head-h));
}

/* With the chat header Zulip's top container is 62px taller, also over the
   rail and the list. Only the blue bar and the header take clicks; the empty
   strip lets them through (Chat button, list header). */
html.imc-rail.imc-chat-head-on #navbar-fixed-container {
    pointer-events: none;
}

html.imc-rail.imc-chat-head-on #navbar-fixed-container > :not(#imc-chat-head-row) {
    pointer-events: auto;
}
html.imc-rail.imc-chat-head-on #imc-chat-head-row {
    display: block;
    position: relative;
    height: var(--imc-chat-head-h);
    pointer-events: none; /* only the bar itself, not the strip over the list */
}

html.imc-rail .imc-chat-head {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--imc-mid-left, 0px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 0 14px 0 20px;
    pointer-events: auto;
    background: var(--imc-dock-bg);
    color: var(--imc-dock-text);
    border-bottom: 1px solid var(--imc-dock-line);
    box-shadow: 0 2px 6px rgb(15 42 95 / 5%);
}

html.imc-rail .imc-chat-head-face :is(.imc-avatar, .imc-channel-icon) {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 15px;
    font-weight: 700;
}

html.imc-rail .imc-chat-head-face .imc-avatar {
    border-radius: 50%;
    color: #fff;
    background: light-dark(#dbe3f1, #263049);
}

html.imc-rail .imc-chat-head-face .imc-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

html.imc-rail .imc-chat-head-face .imc-avatar-group {
    background: linear-gradient(135deg, var(--imc-navy), var(--imc-brand-2));
    font-size: 18px;
}

html.imc-rail .imc-chat-head-face .imc-channel-icon {
    border-radius: 12px;
    font-size: 18px;
    color: var(--imc-channel-color);
    background: color-mix(in srgb, var(--imc-channel-color) 16%, transparent);
}

html.imc-rail .imc-chat-head-face .imc-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--imc-dock-bg);
}

html.imc-rail .imc-chat-head-face .imc-online.imc-away {
    background: #f59e0b;
}

html.imc-rail .imc-chat-head-text {
    flex: 1;
    min-width: 0;
}

html.imc-rail .imc-chat-head-title {
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-rail .imc-chat-head-sub {
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--imc-dock-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.imc-rail .imc-chat-head-sub.imc-live {
    color: #16a34a;
    font-weight: 600;
}

html.imc-rail .imc-chat-head-actions {
    display: flex;
    gap: 4px;
}

html.imc-rail .imc-head-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: light-dark(var(--imc-brand), #a9c4ff);
    font-size: 17px;
    cursor: pointer;
}

html.imc-rail .imc-head-btn:hover {
    background: var(--imc-dock-tint);
}

/* The name now lives in the chat header: the top bar keeps only the search */
html.imc-rail.imc-chat-head-on :is(#imc-back, #imc-title-face, #imc-title, #imc-call-btns, #message_view_header) {
    display: none !important;
}

/* ===== Typing bar: every Zulip button kept, in one tidy box ===== */
/* Text, buttons and send controls form one rounded box */
html.imc-rail #compose .messagebox {
    border: 1px solid light-dark(#dfe5ee, #2a344c) !important;
    border-radius: 16px !important;
    background: light-dark(#f7f9fc, #19212f) !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

html.imc-rail #compose .messagebox:focus-within {
    border-color: light-dark(rgb(31 79 174 / 45%), rgb(143 180 255 / 45%)) !important;
    box-shadow: 0 0 0 3px light-dark(rgb(31 79 174 / 10%), rgb(143 180 255 / 12%));
}

/* The text field itself has no second box inside the box */
html.imc-rail #compose-textarea,
html.imc-rail #compose-textarea:focus {
    background: transparent !important;
    box-shadow: none !important;
}

/* Formatting buttons: a quiet row under the text, line above it */
html.imc-rail #message-formatting-controls-container {
    border-top: 1px solid light-dark(#e6ebf2, #26304a);
}

html.imc-rail #message-formatting-controls-container .compose_control_button {
    border-radius: 8px;
    color: light-dark(#6b7280, #9aa4ba) !important;
    opacity: 1 !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}

html.imc-rail #message-formatting-controls-container .compose_control_button:hover {
    background: var(--imc-dock-tint) !important;
    color: light-dark(var(--imc-brand), #a9c4ff) !important;
}

html.imc-rail #message-formatting-controls-container .divider {
    opacity: 0.5;
}

/* "To: name" row: small and light */
html.imc-rail #compose_top {
    margin-bottom: 6px;
}

html.imc-rail #compose-direct-recipient .pill {
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--imc-dock-tint) !important;
    color: light-dark(var(--imc-brand), #a9c4ff) !important;
    font-weight: 600;
}

html.imc-rail #compose_select_recipient_widget,
html.imc-rail #stream_message_recipient_topic {
    border-radius: 10px !important;
}

/* Drafts and the send options: small and muted, the send/mic button stands out */
html.imc-rail #compose-drafts-button {
    font-size: 12.5px;
    color: var(--imc-dock-muted) !important;
    text-decoration: none;
}

html.imc-rail #compose-drafts-button:hover {
    color: light-dark(var(--imc-brand), #a9c4ff) !important;
}

html.imc-rail #send_later {
    border-radius: 10px !important;
    color: var(--imc-dock-muted) !important;
}

/* Quick replies above: a little smaller so the box stays the focus */
html.imc-rail .imc-qr-bar {
    gap: 6px;
    padding-bottom: 8px;
}

html.imc-rail .imc-qr-chip {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

/* ===== "Online now": < > arrows to move through the photos ===== */
.imc-quick-wrap {
    position: relative;
}

.imc-quick-arrow {
    display: none;
}

html.imc-rail .imc-quick-arrow {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 30px;
    margin-top: -24px;
    padding: 0;
    border: 1px solid var(--imc-dock-line);
    border-radius: 50%;
    background: var(--imc-dock-bg);
    color: var(--imc-dock-text);
    font-size: 14px;
    box-shadow: 0 2px 8px rgb(15 42 95 / 15%);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

html.imc-rail .imc-quick-prev {
    left: 4px;
}

html.imc-rail .imc-quick-next {
    right: 4px;
}

html.imc-rail .imc-quick-wrap:hover .imc-quick-arrow {
    opacity: 1;
}

html.imc-rail .imc-quick-wrap.imc-at-start .imc-quick-prev,
html.imc-rail .imc-quick-wrap.imc-at-end .imc-quick-next {
    opacity: 0 !important;
    pointer-events: none;
}

html.imc-rail .imc-quick-arrow:hover {
    color: light-dark(var(--imc-brand), #a9c4ff);
}

/* ===== "Views": only Zulip's views (Inbox, Recent, Mentions...) ===== */
html.imc-rail:not(.imc-dock-open) #left_sidebar_scroll_container {
    display: none !important;
}

/* Zulip's sidebar starts under the blue bar, not under the chat header */
html.imc-rail #left-sidebar {
    --navbar-fixed-height: calc(var(--header-height) + var(--navbar-alerts-wrapper-height));
}
/* People column: a full-height panel, not a box floating at the top */
html.imc-rail #right-sidebar {
    box-sizing: border-box;
    min-height: 100vh;
    border-left: 1px solid var(--imc-dock-line);
}

/* Zulip's logo above the first message */
html.imc-rail .top-messages-logo {
    display: none !important;
}

/* ===== Statistics (owners and admins): app.js openStats ===== */
#imc-stats {
    --imc-stats-bar: light-dark(#1f4fae, #5b8def); /* validated: light #fcfcfb, dark #141b2d */
    --imc-stats-track: light-dark(#eef2f8, #1f2940);
    --imc-stats-card: light-dark(#ffffff, #141b2d);
    --imc-stats-text: light-dark(#111827, #e8ecf4);
    --imc-stats-muted: light-dark(#6b7280, #94a0b8);
    --imc-stats-line: light-dark(#e8edf4, #232c42);
    position: fixed;
    top: var(--imc-top, 40px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 101; /* over the people column (100), under the top bar (102) */
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 24px 40px;
    background: var(--imc-chat-bg, light-dark(#eef2f8, #0b101c));
    color: var(--imc-stats-text);
}

#imc-stats[hidden] {
    display: none !important;
}

html.imc-mobile #imc-stats {
    bottom: var(--imc-tabbar-h, 60px);
    z-index: 106;
    padding: 14px 12px 28px;
}

/* The chat header and typing bar stay out of the way meanwhile */
html.imc-stats-open #imc-chat-head-row,
html.imc-stats-open #compose {
    visibility: hidden;
}

#imc-stats .imc-stats-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 1180px;
    margin: 0 auto;
}

#imc-stats .imc-stats-titles {
    flex: 1;
    min-width: 0;
}

#imc-stats .imc-stats-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#imc-stats .imc-stats-sub {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--imc-stats-muted);
}

#imc-stats .imc-head-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--imc-stats-muted);
    font-size: 16px;
    cursor: pointer;
}

#imc-stats .imc-head-btn:hover {
    background: var(--imc-stats-track);
    color: var(--imc-stats-text);
}

/* Period presets: one row above everything they scope */
#imc-stats .imc-stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 1180px;
    margin: 14px auto 16px;
}

#imc-stats .imc-chip {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 16px;
    background: var(--imc-stats-card);
    color: light-dark(#374151, #c3cbe0);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(15 42 95 / 8%);
    cursor: pointer;
}

#imc-stats .imc-chip.imc-chip-on {
    background: light-dark(var(--imc-brand), #3b82f6);
    color: #fff;
}

#imc-stats .imc-stats-body {
    max-width: 1180px;
    margin: 0 auto;
    transition: opacity 0.15s ease;
}

/* Reloading: the previous numbers stay, dimmed */
#imc-stats.imc-stats-busy .imc-stats-body {
    opacity: 0.5;
}

#imc-stats .imc-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--imc-stats-muted);
}

/* Stat tiles; the message count is the one hero figure */
#imc-stats .imc-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

#imc-stats .imc-stat-tile,
#imc-stats .imc-stats-card {
    box-sizing: border-box;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--imc-stats-card);
    box-shadow: 0 1px 3px rgb(15 42 95 / 7%);
}

#imc-stats .imc-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--imc-stats-muted);
}

#imc-stats .imc-stat-value {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

#imc-stats .imc-stat-hero .imc-stat-value {
    font-size: 48px;
}

#imc-stats .imc-stat-note {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--imc-stats-muted);
}

/* Cards: two columns on a wide screen, one on a narrow one */
#imc-stats .imc-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#imc-stats .imc-stats-wide {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    #imc-stats .imc-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

#imc-stats .imc-stats-card-head {
    margin-bottom: 12px;
}

#imc-stats .imc-stats-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

#imc-stats .imc-stats-card-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--imc-stats-muted);
}

/* Ranked bars */
#imc-stats .imc-rank-row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#imc-stats .imc-rank-row[hidden] {
    display: none;
}

#imc-stats .imc-rank-row:hover {
    background: var(--imc-stats-track);
}

#imc-stats .imc-rank-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#imc-stats .imc-rank-label {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#imc-stats .imc-rank-tile,
#imc-stats .imc-rank-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}

#imc-stats .imc-rank-tile {
    border-radius: 8px;
    color: var(--imc-channel-color);
    background: color-mix(in srgb, var(--imc-channel-color) 16%, transparent);
}

#imc-stats .imc-rank-avatar {
    border-radius: 50%;
    color: #fff;
    background: light-dark(#dbe3f1, #263049);
}

#imc-stats .imc-rank-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#imc-stats .imc-rank-track {
    height: 12px;
}

#imc-stats .imc-rank-bar {
    height: 100%;
    border-radius: 0 4px 4px 0; /* square at the baseline, rounded at the data end */
    background: var(--imc-stats-bar);
}

#imc-stats .imc-rank-row:hover .imc-rank-bar {
    filter: brightness(1.12);
}

#imc-stats .imc-rank-value {
    min-width: 44px;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#imc-stats .imc-stats-more {
    margin: 8px 0 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* Columns over time */
#imc-stats .imc-cols {
    position: relative;
    padding-left: 38px;
}

#imc-stats .imc-cols-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

#imc-stats .imc-cols-line {
    position: relative;
    border-top: 1px solid var(--imc-stats-line);
}

#imc-stats .imc-cols-tick {
    position: absolute;
    left: 0;
    top: -8px;
    width: 32px;
    font-size: 11px;
    color: var(--imc-stats-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#imc-stats .imc-cols-bars {
    position: relative;
    height: 160px;
    display: flex;
    align-items: flex-end;
    gap: 2px; /* the surface gap between neighbouring columns */
}

#imc-stats .imc-col {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    outline: none;
    cursor: default;
}

#imc-stats .imc-col-bar {
    width: 100%;
    max-width: 24px;
    border-radius: 4px 4px 0 0;
    background: var(--imc-stats-bar);
}

#imc-stats .imc-col:hover .imc-col-bar,
#imc-stats .imc-col:focus-visible .imc-col-bar {
    filter: brightness(1.18);
}

#imc-stats .imc-col:focus-visible {
    box-shadow: inset 0 0 0 2px light-dark(rgb(31 79 174 / 35%), rgb(143 180 255 / 35%));
    border-radius: 4px;
}

#imc-stats .imc-cols-x {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--imc-stats-muted);
}

#imc-stats .imc-stats-tip {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border-radius: 10px;
    background: light-dark(#111827, #e8ecf4);
    color: light-dark(#ffffff, #111827);
    font-size: 12px;
    box-shadow: 0 6px 18px rgb(8 14 30 / 25%);
    pointer-events: none;
    white-space: nowrap;
}

#imc-stats .imc-stats-tip[hidden] {
    display: none;
}

#imc-stats .imc-stats-tip strong {
    font-size: 13.5px;
}

#imc-stats .imc-stats-tip span {
    opacity: 0.75;
}

/* Table view under each chart */
#imc-stats .imc-stats-table {
    margin-top: 10px;
    font-size: 13px;
}

#imc-stats .imc-stats-table summary {
    color: light-dark(var(--imc-brand), #8fb4ff);
    font-weight: 700;
    cursor: pointer;
}

#imc-stats .imc-stats-table table {
    margin-top: 8px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

#imc-stats .imc-stats-table :is(th, td) {
    padding: 3px 16px 3px 0;
    border-bottom: 1px solid var(--imc-stats-line);
    text-align: left;
}

#imc-stats .imc-stats-table th {
    color: var(--imc-stats-muted);
    font-weight: 600;
}

/* Quiet channels */
#imc-stats .imc-quiet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#imc-stats .imc-quiet-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--imc-stats-line);
    border-radius: 18px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#imc-stats .imc-quiet-chip:hover {
    background: var(--imc-stats-track);
}

#imc-stats .imc-quiet-chip .imc-rank-tile {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
}

#imc-stats .imc-stats-foot {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--imc-stats-muted);
}

/* The Stats button on the rail stays hidden for everyone else */
html.imc-rail .imc-rail-item[hidden] {
    display: none;
}

/* ===== Tickets (app.js "Tickets") ===== */
.imc-ticket-tile {
    --imc-prio: light-dark(#1f4fae, #5b8def);
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--imc-prio);
    background: color-mix(in srgb, var(--imc-prio) 14%, transparent);
    font-size: 18px;
}

.imc-prio-low {
    --imc-prio: light-dark(#6b7280, #9aa4ba);
}

.imc-prio-normal {
    --imc-prio: light-dark(#1f4fae, #5b8def);
}

.imc-prio-high {
    --imc-prio: light-dark(#c2410c, #fb923c);
}

.imc-prio-urgent {
    --imc-prio: light-dark(#dc2626, #f87171);
}

.imc-ticket-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.imc-st-open {
    background: light-dark(rgb(31 79 174 / 12%), rgb(91 141 239 / 20%));
    color: light-dark(#1f4fae, #a9c4ff);
}

.imc-st-progress {
    background: light-dark(#fef3c7, rgb(245 158 11 / 18%));
    color: light-dark(#92400e, #fbbf24);
}

.imc-st-done {
    background: light-dark(#dcfce7, rgb(34 197 94 / 16%));
    color: light-dark(#166534, #4ade80);
}

.imc-overdue,
.imc-chat-head-sub.imc-overdue {
    color: light-dark(#dc2626, #f87171) !important;
    font-weight: 600;
}

.imc-ticket-done .imc-row-title {
    color: var(--imc-dock-muted, #6b7280);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Ticket buttons in the chat header */
.imc-chat-head-face .imc-ticket-tile {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
}

.imc-head-pill {
    font-family: inherit;
    height: 32px;
    padding: 0 14px;
    border: 1px solid light-dark(rgb(31 79 174 / 25%), rgb(143 180 255 / 30%));
    border-radius: 16px;
    background: transparent;
    color: light-dark(#1f4fae, #a9c4ff);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.imc-head-pill:hover {
    background: light-dark(rgb(31 79 174 / 8%), rgb(143 180 255 / 12%));
}

.imc-head-pill.imc-primary {
    border-color: transparent;
    background: light-dark(#15803d, #22c55e);
    color: #fff;
}

.imc-head-pill.imc-primary:hover {
    filter: brightness(1.08);
}

/* New ticket form: a window on the PC, the whole screen on a phone */
.imc-tf-backdrop {
    --tf-bg: light-dark(#ffffff, #141b2d);
    --tf-field: light-dark(#f6f8fc, #1a2234);
    --tf-line: light-dark(#dfe5ee, #2a344c);
    --tf-text: light-dark(#111827, #e8ecf4);
    --tf-muted: light-dark(#6b7280, #94a0b8);
    position: fixed;
    inset: 0;
    z-index: 1095;
    display: grid;
    place-items: center;
    background: rgb(8 14 30 / 45%);
    backdrop-filter: blur(2px);
}

.imc-tf-backdrop[hidden] {
    display: none;
}

.imc-tf {
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    width: min(500px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 18px 20px 20px;
    border-radius: 20px;
    background: var(--tf-bg);
    color: var(--tf-text);
    box-shadow: 0 24px 60px rgb(8 14 30 / 35%);
}

html.imc-mobile .imc-tf {
    width: 100vw;
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding-top: calc(14px + env(safe-area-inset-top));
}

.imc-tf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.imc-tf-title {
    font-size: 19px;
    font-weight: 800;
}

.imc-tf .imc-head-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tf-muted);
    cursor: pointer;
}

.imc-tf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.imc-tf-label {
    font-size: 13px;
    font-weight: 700;
}

.imc-tf-hint {
    font-size: 12px;
    color: var(--tf-muted);
}

.imc-tf-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--tf-line);
    border-radius: 10px;
    background: var(--tf-field);
    color: var(--tf-text);
    font: inherit;
    font-size: 15px;
    outline: 0;
}

.imc-tf-input:focus {
    border-color: light-dark(rgb(31 79 174 / 55%), rgb(143 180 255 / 55%));
    box-shadow: 0 0 0 3px light-dark(rgb(31 79 174 / 12%), rgb(143 180 255 / 14%));
}

.imc-tf-text {
    resize: vertical;
    line-height: 1.45;
}

.imc-tf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.imc-tf-chip {
    font-family: inherit;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tf-line);
    border-radius: 17px;
    background: transparent;
    color: var(--tf-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.imc-tf-chip.imc-on {
    border-color: var(--imc-prio);
    background: color-mix(in srgb, var(--imc-prio) 14%, transparent);
    color: var(--imc-prio);
    font-weight: 800;
}

.imc-tf-error {
    padding: 8px 12px;
    border-radius: 10px;
    background: light-dark(#fee2e2, rgb(248 113 113 / 15%));
    color: light-dark(#b91c1c, #fca5a5);
    font-size: 13.5px;
    font-weight: 600;
}

.imc-tf-error[hidden] {
    display: none;
}

.imc-tf-submit {
    font-family: inherit;
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: light-dark(#1f4fae, #3b82f6);
    color: #fff;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;
}

.imc-tf-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* @mentions inside your own (blue) bubbles: white, not blue on blue */
:is(html.imc-desktop, html.imc-mobile) [data-imc-mine] .message_content :is(.user-mention, .user-group-mention, .topic-mention) {
    color: #fff !important;
    background: rgb(255 255 255 / 20%) !important;
}

/* Phone: a ".../near/123" conversation link is shown by Zulip as a search;
   keep the app's top bar (back button, name) and hide the search pills. */
html.imc-mobile.imc-near-view #searchbox_form.expanded {
    display: none !important;
}