/* ============================================================
   CONVERSATIONS / CHAT
   ============================================================ */

/* ----------------------------------------------------------
   0. Workspace Channels Page
   ---------------------------------------------------------- */

#workspace-conversations-page {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px;
    box-sizing: border-box;
}

.workspace-conversations-skeleton-page {
    overflow: hidden;
}

#workspace-conversations-sidebar,
#workspace-conversations-main {
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);
    background:
        radial-gradient(circle at top left, rgba(125, 92, 255, 0.05), transparent 36%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.workspace-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-small);
    background: color-mix(in srgb, var(--surface-hover) 76%, var(--border-color));
}

.workspace-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 42%, transparent) 50%,
        transparent 100%
    );
    animation: workspace-conversations-skeleton-shimmer 1.2s ease-in-out infinite;
}

#workspace-conversations-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: none;
    border: none;
    box-shadow: none;
}

#workspace-conversations-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    padding-top: 0;
}

.workspace-skeleton-button {
    width: 100%;
    height: var(--height-small);
}

#workspace-conversations-new-channel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    color: var(--font-black);
    font-size: 13px;
    font-weight: 600;
    
    cursor: pointer;
    transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

#workspace-conversations-new-channel-btn:hover {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--purple-dark) 30%, var(--border-color));
}

#workspace-conversations-new-channel-btn.is-disabled,
#workspace-conversations-new-channel-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.workspace-conversations-new-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-dark);
}

#workspace-conversations-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
}

.workspace-conversations-skeleton-list {
    gap: 8px;
}

.workspace-skeleton-channel {
    width: 100%;
    height: var(--height-small);
}

.workspace-skeleton-channel.short {
    width: 82%;
}

.workspace-channel-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--height-small);
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--font-black);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.workspace-channel-item:hover {
    background: var(--surface-hover);
}

.workspace-channel-item.active {
    background: color-mix(in srgb, var(--purple-dark) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--purple-dark) 24%, var(--border-color));
}

.workspace-channel-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    color: var(--font-gray);
}

.workspace-channel-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

#workspace-conversations-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.workspace-conversation-skeleton-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.workspace-conversation-skeleton-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.workspace-skeleton-icon-btn {
    width: var(--height-small);
    min-width: var(--height-small);
    height: var(--height-small);
    border-radius: var(--radius-small);
}

.workspace-skeleton-title {
    width: min(220px, 58%);
    height: 18px;
}

.workspace-conversation-skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
    padding: 20px;
    box-sizing: border-box;
}

.workspace-conversation-skeleton-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.workspace-conversation-skeleton-message.align-end {
    justify-content: flex-end;
}

.workspace-skeleton-avatar {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
}

.workspace-conversation-skeleton-bubbles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, 72%);
}

.workspace-conversation-skeleton-bubbles.align-end {
    align-items: flex-end;
}

.workspace-skeleton-line {
    height: 12px;
    border-radius: 999px;
}

.workspace-skeleton-line.sm {
    width: 34%;
}

.workspace-skeleton-line.md {
    width: 52%;
}

.workspace-skeleton-line.lg {
    width: 68%;
}

.workspace-skeleton-line.xl {
    width: 86%;
}

.workspace-conversation-skeleton-input {
    padding: 0 20px 20px;
    box-sizing: border-box;
}

.workspace-skeleton-input-inner {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-small);
}

#workspace-conversations-main-inner,
.workspace-conversation-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#workspace-conversation-header {
    border-bottom: 1px solid var(--border-color);
}

.workspace-conversation-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.workspace-conversation-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.workspace-conversation-topbar-copy {
    min-width: 0;
}

.workspace-conversation-topbar-copy h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--font-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-conversation-topbar-right {
    position: relative;
    display: flex;
    align-items: center;
}

#workspace-conversation-back,
#workspace-conversation-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--height-small);
    min-width: var(--height-small);
    height: var(--height-small);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    color: var(--font-black);
    cursor: pointer;
}

#workspace-conversation-back:hover,
#workspace-conversation-menu-trigger:hover {
    background: var(--surface-hover);
}

#workspace-conversation-embed {
    min-height: 0;
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}

.workspace-conversation-empty-state,
#workspace-conversations-single-user-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
}

/* The invite state is a big empty state like the others: wallpaper ground,
   gradient icon tile and gradient title come from the shared recipe
   (.chat-wallpaper + .conversation-empty-state-*), so only its own spacing
   and the CTA live here. */
#workspace-conversations-single-user-state.chat-wallpaper {
    gap: 8px;
    border-radius: var(--radius-big);
}

#workspace-conversations-single-user-state .conversation-empty-state-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

#workspace-conversations-single-user-state .conversation-empty-state-text {
    max-width: 420px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

#workspace-conversations-single-user-state #workspace-conversations-invite-btn {
    margin-top: 6px;
}

#workspace-conversations-invite-btn {
    min-height: var(--height-small);
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--purple-dark) 32%, var(--border-color));
    border-radius: var(--radius-small);
    background: var(--purple-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@keyframes workspace-conversations-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ----------------------------------------------------------
   1. Post Editor Chat Panel (same pattern as preview/artifacts)
   ---------------------------------------------------------- */

#modal-new-publication-chat-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.992);
    pointer-events: none;
    padding: 14px;
    box-sizing: border-box;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    will-change: opacity, transform;
    border-radius: var(--radius-big);
    overflow: hidden;
    border: 1px solid var(--border-color);
    z-index: 2;
    background:
        radial-gradient(circle at top left, rgba(125, 92, 255, 0.06), transparent 34%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.05), transparent 30%),
        var(--surface);
}

/* Hide the main content panel when chat mode is active */
#modal-new-publication[data-panel-mode="chat"] #modal-content-new-publication {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.992);
    pointer-events: none;
}

/* Show the chat panel when chat mode is active */
#modal-new-publication[data-panel-mode="chat"] #modal-new-publication-chat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Chat panel shell (inner layout) */
#modal-new-publication-chat-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 12px;
}

#modal-new-publication-chat-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* ----------------------------------------------------------
   2. Post Preview Chat Slide-out Panel
   ---------------------------------------------------------- */

#post-preview-chat-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    width: 360px;
    height: 100%;
    background-color: var(--bg-blue-dark-2);
    border: 1px solid var(--border-color);
    border-left: none;
    padding: 8px;
    border-radius: var(--radius-big);
    box-shadow: var(--shadow-lg);
    transform: translateX(-20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 250ms ease, opacity 250ms ease, visibility 250ms ease;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 2;
}

#post-preview-chat-panel.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ----------------------------------------------------------
   2b. Chat wallpaper (shared)
   WhatsApp's way round: the COLOUR is the ground and the glyphs are one ink
   scattered on top of it. One glyph per cell of a jittered 8x8 grid: even
   density everywhere, but every glyph has its own size and angle so it still
   reads as hand-strewn. The Mydrop mark in there is the real traced logo,
   simplified to 52 points. Used by the inbox thread pane, every conversation
   room (app + client portal) and the big empty states.
   The host isolates its stacking context and the ink sits at z-index -1, so
   children need no lifting and keep their own stacking behaviour.
   ---------------------------------------------------------- */

.chat-wallpaper {
    --chat-wallpaper-ground: color-mix(in srgb, var(--accent, var(--purple-dark, #7c5cff)) 5%, var(--surface, #ffffff) 95%);
    --chat-wallpaper-plate: color-mix(in srgb, var(--surface, #ffffff) 82%, transparent 18%);
    position: relative;
    isolation: isolate;
    background: var(--chat-wallpaper-ground);
}

.chat-wallpaper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0.10;
    background-color: var(--font-black, #191a2b);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='448' viewBox='0 0 448 448' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(43.1 41.2) rotate(-40.6) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(81.4 29.0) rotate(19.0) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(138.1 18.6) rotate(33.7) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(182.1 35.1) rotate(-40.4) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(259.9 23.3) rotate(-24.7) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(311.0 33.3) rotate(-23.9) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(359.4 36.7) rotate(39.4) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(425.4 21.8) rotate(26.4) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(35.3 87.0) rotate(14.8) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(73.3 73.2) rotate(14.6) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(129.8 71.0) rotate(-6.2) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(188.5 86.4) rotate(-14.2) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(265.4 85.4) rotate(4.1) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(296.2 88.0) rotate(17.4) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(363.8 78.2) rotate(35.2) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(406.6 80.1) rotate(39.9) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(32.4 136.4) rotate(26.0) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(67.6 130.7) rotate(3.2) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(148.4 134.8) rotate(-0.8) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(181.7 138.9) rotate(21.4) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(267.1 130.5) rotate(4.7) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(296.9 141.5) rotate(-20.7) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(352.7 123.6) rotate(13.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(430.5 153.3) rotate(-36.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(41.4 204.3) rotate(-17.2) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(77.2 208.1) rotate(4.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(132.8 180.1) rotate(-14.1) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(203.7 193.7) rotate(37.9) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(246.6 202.3) rotate(-22.3) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(323.4 206.1) rotate(-41.7) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3Cg transform='translate(348.0 211.3) rotate(-24.9) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(404.2 201.2) rotate(38.2) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(34.7 251.3) rotate(18.5) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(84.9 245.2) rotate(-23.0) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(152.2 251.9) rotate(14.6) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(193.0 258.1) rotate(-12.7) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(244.4 266.5) rotate(-9.4) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(321.0 257.6) rotate(32.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(356.5 238.2) rotate(33.0) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(408.1 247.7) rotate(-3.1) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(20.5 317.1) rotate(30.1) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(93.5 294.9) rotate(11.3) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(136.9 293.9) rotate(-11.6) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(200.1 317.4) rotate(20.0) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(255.7 303.3) rotate(10.5) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(313.2 296.9) rotate(34.6) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(380.3 295.8) rotate(-30.3) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(413.1 321.3) rotate(5.9) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3Cg transform='translate(12.8 348.6) rotate(-33.4) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(71.7 350.3) rotate(-24.7) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(156.5 372.7) rotate(2.8) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(210.7 369.5) rotate(12.7) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(254.0 372.1) rotate(32.5) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(295.5 360.0) rotate(27.8) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3Cg transform='translate(363.7 359.0) rotate(21.7) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(408.6 357.8) rotate(-37.1) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(35.9 419.1) rotate(7.5) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(79.5 435.3) rotate(14.3) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(150.7 416.6) rotate(6.4) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(197.2 424.1) rotate(26.4) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(266.1 436.2) rotate(22.9) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(306.5 403.3) rotate(-9.9) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(372.0 417.4) rotate(39.9) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(425.8 436.1) rotate(18.4) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='448' viewBox='0 0 448 448' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(43.1 41.2) rotate(-40.6) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(81.4 29.0) rotate(19.0) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(138.1 18.6) rotate(33.7) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(182.1 35.1) rotate(-40.4) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(259.9 23.3) rotate(-24.7) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(311.0 33.3) rotate(-23.9) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(359.4 36.7) rotate(39.4) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(425.4 21.8) rotate(26.4) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(35.3 87.0) rotate(14.8) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(73.3 73.2) rotate(14.6) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(129.8 71.0) rotate(-6.2) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(188.5 86.4) rotate(-14.2) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(265.4 85.4) rotate(4.1) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(296.2 88.0) rotate(17.4) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(363.8 78.2) rotate(35.2) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(406.6 80.1) rotate(39.9) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(32.4 136.4) rotate(26.0) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(67.6 130.7) rotate(3.2) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(148.4 134.8) rotate(-0.8) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(181.7 138.9) rotate(21.4) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(267.1 130.5) rotate(4.7) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(296.9 141.5) rotate(-20.7) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(352.7 123.6) rotate(13.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(430.5 153.3) rotate(-36.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(41.4 204.3) rotate(-17.2) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(77.2 208.1) rotate(4.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(132.8 180.1) rotate(-14.1) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(203.7 193.7) rotate(37.9) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(246.6 202.3) rotate(-22.3) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(323.4 206.1) rotate(-41.7) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3Cg transform='translate(348.0 211.3) rotate(-24.9) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(404.2 201.2) rotate(38.2) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(34.7 251.3) rotate(18.5) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(84.9 245.2) rotate(-23.0) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(152.2 251.9) rotate(14.6) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(193.0 258.1) rotate(-12.7) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(244.4 266.5) rotate(-9.4) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(321.0 257.6) rotate(32.2) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(356.5 238.2) rotate(33.0) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(408.1 247.7) rotate(-3.1) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(20.5 317.1) rotate(30.1) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(93.5 294.9) rotate(11.3) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(136.9 293.9) rotate(-11.6) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(200.1 317.4) rotate(20.0) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(255.7 303.3) rotate(10.5) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(313.2 296.9) rotate(34.6) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M5 5h14a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-8l-6 4V8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(380.3 295.8) rotate(-30.3) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(413.1 321.3) rotate(5.9) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3Cg transform='translate(12.8 348.6) rotate(-33.4) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(71.7 350.3) rotate(-24.7) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(156.5 372.7) rotate(2.8) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(210.7 369.5) rotate(12.7) scale(0.792) translate(-12 -12)'%3E%3Cpath d='M12 4a8 8 0 1 0 5 14 M12 8a4 4 0 1 0 4 4v-4'/%3E%3C/g%3E%3Cg transform='translate(254.0 372.1) rotate(32.5) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M4 6h16v13H4z M4 10h16M9 3v5M15 3v5'/%3E%3C/g%3E%3Cg transform='translate(295.5 360.0) rotate(27.8) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3Cg transform='translate(363.7 359.0) rotate(21.7) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M12 3l2.2 6.2L20.4 11l-6.2 2.2L12 19.4 9.8 13.2 3.6 11l6.2-1.8z'/%3E%3C/g%3E%3Cg transform='translate(408.6 357.8) rotate(-37.1) scale(0.708) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(35.9 419.1) rotate(7.5) scale(0.625) translate(-12 -12)'%3E%3Cpath d='M12 20c-4-3.6-8-6.4-8-10a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 3.6-4 6.4-8 10z'/%3E%3C/g%3E%3Cg transform='translate(79.5 435.3) rotate(14.3) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M4 12 L20 5 L14 20 L11 14 Z'/%3E%3C/g%3E%3Cg transform='translate(150.7 416.6) rotate(6.4) scale(0.667) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(197.2 424.1) rotate(26.4) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M4 6h16v12H4z M8 10.5a1.5 1.5 0 1 0 0-.01 M4 16l5-4 3 2.5 3-2 5 3.5'/%3E%3C/g%3E%3Cg transform='translate(266.1 436.2) rotate(22.9) scale(0.583) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(306.5 403.3) rotate(-9.9) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M7.51 4.39 L14.80 15.52 L15.00 16.80 L14.74 17.85 L14.03 18.83 L13.04 19.43 L12.34 19.60 L11.44 19.57 L10.52 19.22 L9.87 18.72 L5.11 11.64 L4.68 10.81 L4.52 9.61 L4.77 8.60 L7.51 4.39 Z M4.57 10.36 L4.57 10.36 Z M14.78 17.72 L14.78 17.72 Z M16.51 4.39 L23.54 15.01 L23.83 15.59 L24.00 16.81 L23.74 17.84 L23.07 18.78 L22.04 19.43 L21.11 19.61 L20.21 19.51 L19.50 19.21 L18.78 18.63 L14.01 11.48 L13.68 10.82 L13.51 9.73 L13.75 8.64 L16.51 4.39 Z M13.76 8.63 L13.76 8.63 Z M3.01 11.20 L5.60 15.10 L5.90 15.82 L6.01 16.56 L5.77 17.76 L5.15 18.71 L4.23 19.35 L3.09 19.61 L1.95 19.42 L0.93 18.79 L0.27 17.87 L0.00 16.72 L0.09 15.88 L0.33 15.23 L3.01 11.20 Z'/%3E%3C/g%3E%3Cg transform='translate(372.0 417.4) rotate(39.9) scale(0.542) translate(-12 -12)'%3E%3Cpath d='M7 9h10M6 15h10M11 6l-2 12M17 6l-2 12'/%3E%3C/g%3E%3Cg transform='translate(425.8 436.1) rotate(18.4) scale(0.750) translate(-12 -12)'%3E%3Cpath d='M12.00 4.00 C11.60 5.20 7.60 12.36 7.60 14.56 a4.40 4.40 0 0 0 8.80 0 C16.40 12.36 12.40 5.20 12.00 4.00 Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 448px 448px;
    mask-size: 448px 448px;
}

:root:not([data-theme="light"]) .chat-wallpaper {
    --chat-wallpaper-ground: color-mix(in srgb, var(--accent, var(--purple-dark, #7c5cff)) 8%, var(--surface, #1d1f2e) 92%);
}

/* Rooms: the wrapper is the wallpaper host (the scroller is its child, so
   the pattern stays put while messages scroll). Multi-author rooms keep the
   flat team-chat row (avatar, name and time on one line, text under the
   name), drawn straight on the wallpaper: no plates, no bubbles, one gutter
   and one avatar size for messages and their thread alike. */
.conversation-wrapper.chat-wallpaper {
    border-radius: var(--radius-big);
}

.chat-wallpaper .conversation-messages {
    gap: 22px;
    padding: 16px 16px 0;
}

.chat-wallpaper .conversation-message {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border-radius: var(--radius-big);
    background: transparent;
    box-shadow: none;
}

.chat-wallpaper .conversation-message:hover {
    background: transparent;
}

.chat-wallpaper .conversation-message > .conversation-message-avatar {
    align-self: start;
    margin-top: 1px;
}

.chat-wallpaper .conversation-message-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

/* Meta line: name, time, and the hover actions inline (no floating toolbar). */
.chat-wallpaper .conversation-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    padding: 0;
    color: var(--font-gray);
    font-size: 11px;
    line-height: 20px;
}

.chat-wallpaper .conversation-message-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--font-black);
}

.chat-wallpaper .conversation-message-time {
    font-size: 11px;
    line-height: 20px;
    opacity: 0.8;
}

.chat-wallpaper .conversation-message-actions {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.chat-wallpaper .conversation-message:hover .conversation-message-actions,
.chat-wallpaper .conversation-message:focus-within .conversation-message-actions {
    opacity: 1;
    pointer-events: auto;
}

.chat-wallpaper .conversation-message-actions .conversation-reaction-btn,
.chat-wallpaper .conversation-message-actions .conversation-reply-btn,
.chat-wallpaper .conversation-message-actions .conversation-edit-btn,
.chat-wallpaper .conversation-message-actions .conversation-delete-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
}

.chat-wallpaper .conversation-message-actions svg {
    width: 14px;
    height: 14px;
}

/* ---- Message actions on a finger -------------------------------------------
   The cluster above lives at `opacity: 0` until `:hover`, so on a touch screen
   reply / like / edit / delete were unreachable on every conversation surface —
   team channels, post comments, the brand room and the public client portal.
   Two answers, because the two surfaces hold different numbers of actions:

   - In the APP a message carries up to four. Hard rule 8 says a cluster of
     actions lives behind ONE menu, so the phone gets the kebab below and
     `mobile.css` hides the cluster; rowActions.js reads the real buttons out of
     it and clicks them, so nothing is reimplemented. The kebab is desktop-
     invisible: hover still owns that pointer.
   - The PORTAL carries exactly one (Reply); the reaction sits in the footer and
     was always visible. One action is "one inline primary at most", so it is
     simply drawn. The portal loads this file and NOT mobile.css, which is why
     this rule cannot live there. */
.conversation-message-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    /* The header is a no-wrap flex line and the name is greedy: without the
       basis the control shrank 28 -> 20px (measured at 390px). */
    flex: 0 0 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: var(--radius-mini);
    background: transparent;
    color: var(--font-gray);
    cursor: pointer;
}

.conversation-message-menu-btn svg {
    width: 16px;
    height: 16px;
}

@media (hover: none), (max-width: 600px) {
    .mydrop-portal-body .chat-wallpaper .conversation-message-actions {
        opacity: 1;
        pointer-events: auto;
        margin-left: auto;
        flex: 0 0 auto;
    }
    /* The header is one no-wrap flex line: a long author name has to give way
       to the control, not push it off the row. */
    .chat-wallpaper .conversation-message-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-wallpaper .conversation-message-time {
        flex: 0 0 auto;
    }
}

/* The text block: nothing around it. */
.chat-wallpaper .conversation-message-bubble {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-wrap: anywhere;
}

.chat-wallpaper .conversation-message-body {
    padding: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--font-black);
}

.chat-wallpaper .conversation-message-edited {
    display: block;
    margin-top: 2px;
    padding: 0;
    font-size: 11px;
    opacity: 0.7;
}

.chat-wallpaper .conversation-message-attachments {
    padding: 0;
    margin: 4px 0;
}

.chat-wallpaper .conversation-message-footer {
    padding: 0;
    margin-top: 4px;
}

/* Picked for a reply or being edited: a soft accent halo around the row, no
   layout shift. */
.chat-wallpaper .conversation-message.is-reply-target,
.chat-wallpaper .conversation-message.is-edit-target {
    background: color-mix(in srgb, var(--accent, var(--purple-dark)) 8%, transparent 92%);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, var(--purple-dark)) 8%, transparent 92%);
}

.chat-wallpaper .conversation-message.deleted .conversation-message-body {
    color: var(--font-gray);
}

.chat-wallpaper .conversation-message.deleted > .conversation-message-avatar {
    visibility: hidden;
}

/* Edit box in place of the text block. */
.chat-wallpaper .conversation-edit-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.chat-wallpaper .conversation-edit-input {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: var(--radius-big);
    background: var(--surface);
    color: var(--font-black);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 90%, transparent 10%);
}

.chat-wallpaper .conversation-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* The thread under a parent: the same rows, on a hairline, same avatar size. */
.chat-wallpaper .conversation-replies-container {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 0;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--border-color) 80%, transparent 20%);
    gap: 16px;
}

.chat-wallpaper .conversation-replies-container .conversation-message {
    padding: 0;
    grid-template-columns: 28px minmax(0, 1fr);
}

.chat-wallpaper .conversation-replies-container .conversation-message-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 11px;
}

.chat-wallpaper .conversation-replies-container .conversation-message-body {
    font-size: 13px;
}

.chat-wallpaper .conversation-replies-container .conversation-message-name {
    font-size: 13px;
}

/* The wallpaper is the mood now: no radial glow on top of it. */
.chat-wallpaper .conversation-empty-state,
.chat-wallpaper.conversation-empty-state,
.chat-wallpaper.workspace-conversation-empty-state,
.chat-wallpaper.inbox-empty-state {
    background-image: none;
}

.workspace-conversation-empty-state.chat-wallpaper {
    border-radius: var(--radius-big);
}

/* Optimistic rows: painted the instant Send is pressed, confirmed by the
   Firestore echo carrying the same id. Quiet until then. */
.conversation-message.is-pending {
    opacity: 0.62;
}

.conversation-message.is-pending .conversation-message-actions {
    display: none;
}

.conversation-message-pending-icon {
    width: 12px;
    height: 12px;
    vertical-align: -2px;
}

/* ----------------------------------------------------------
   3. Conversation Container (reusable)
   ---------------------------------------------------------- */

.conversation-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Inner wrapper rendered by JS — fills the container */
.conversation-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    min-height: 0;
}

.conversation-wrapper-loading .conversation-messages {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversation-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 180px;
    padding: 18px;
    box-sizing: border-box;
    text-align: center;
}

.conversation-loading-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--purple-dark) 18%, var(--border-color));
    border-top-color: var(--purple-dark);
    animation: conversation-loading-spin 0.75s linear infinite;
}

.conversation-loading-text {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--font-gray);
}

.conversation-input-row.is-disabled {
    opacity: 0.72;
}

.conversation-input-row.is-disabled .conversation-attachment-btn,
.conversation-input-row.is-disabled .conversation-send-btn,
.conversation-input-row.is-disabled .conversation-text-input {
    pointer-events: none;
}

.conversation-text-input.is-readonly {
    cursor: default;
}

@keyframes conversation-loading-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Header */
.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    box-sizing: border-box;
    min-height: 44px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.conversation-header-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--font-black);
}

.conversation-header-count {
    margin: 0;
    font-size: 11px;
    color: var(--font-gray);
    font-weight: 400;
}

.conversation-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.conversation-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--height-small);
    height: var(--height-small);
    border-radius: var(--radius-small);
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--font-gray);
    font-size: 13px;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease;
}

.conversation-header-btn:hover {
    background-color: var(--hover-color);
}

/* Messages scroll area. overscroll-behavior keeps a wheel that reaches the
   end of the list from scrolling the page or panel around the room. */
.conversation-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 8px;
}

/* Empty state */
.conversation-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    user-select: none;
}

.conversation-empty-state-icon {
    font-size: 28px;
    color: var(--font-gray);
    opacity: 0.4;
    margin-bottom: 4px;
    padding: 10px;
    box-sizing: border-box;
}

/* The title IS the empty state's one question, so it takes the primary ink and
   the supporting line stays quiet underneath. It read --font-gray before only
   because a global gradient rule was overriding it with transparent anyway. */
/* Big empty states carry the brand gradient (pink -> violet -> blue) on their
   title: it is the one moment these screens get to look like Mydrop, and it
   stays the brand ramp on purpose — deriving it from the App Style accent
   collapsed it into three shades of one colour. Scoped to this class (never a
   blanket [class*=] rule) and the solid colour is declared first, so the
   heading is still readable if background-clip is unavailable. */
.conversation-empty-state-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--font-black);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .conversation-empty-state-title {
        background: var(--text-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.conversation-empty-state-text {
    margin: 0;
    font-size: 12px;
    color: var(--font-gray);
    opacity: 0.7;
    max-width: 220px;
    line-height: 1.5;
}

/* ----------------------------------------------------------
   4. Message Cards
   ---------------------------------------------------------- */

.conversation-message {    
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 8px 0;
    transition: background-color var(--transition-fast) ease;
    border-radius: var(--radius-small);
    border: none;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}
.conversation-message:hover {
    background-color: color-mix(in srgb, var(--hover-color) 45%, transparent 55%);
}

/* Own messages sit on the SAME flat row as everyone else's. The right-aligned
   tinted bubble this replaced was an SMS pattern: it capped its own width at
   78% (in practice ~232px), which squeezed attachments and text into a narrow
   column, and it gave one thread two different message shapes to scan. Team
   chat reads top-down on one gutter — the author is the differentiator, so the
   only thing left of "mine" is the name in the accent. */
.conversation-message.own .conversation-message-name {
    color: var(--accent);
}

/* Header row */
.conversation-message-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
}

/* Hover action toolbar: floats over the top-right of the message and only
   appears on hover/focus, Slack-style. Holds like / reply / edit / delete. */
.conversation-message-actions {
    position: absolute;
    top: -12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 5;
}
.conversation-message:hover > .conversation-message-header .conversation-message-actions,
.conversation-message:focus-within > .conversation-message-header .conversation-message-actions {
    opacity: 1;
    pointer-events: auto;
}
.conversation-message-actions .conversation-reaction-btn {
    border: none;
    border-radius: var(--radius-mini);
    height: 26px;
    padding: 0 6px;
}
.conversation-message-actions .conversation-reply-btn span {
    display: none;
}
.conversation-message-actions .conversation-reply-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    justify-content: center;
}
.conversation-message-actions .conversation-edit-btn,
.conversation-message-actions .conversation-delete-btn {
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.conversation-message-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Avatar */
.conversation-message-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--bg-white);
    background-color: var(--purple-dark);
    user-select: none;
    flex-shrink: 0;
}

.conversation-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name and time */
.conversation-message-name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--font-black);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-message-time {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--font-gray);
    line-height: 1.3;
    white-space: nowrap;
}

/* Body text: aligned to the text gutter, under the name (never under the avatar) */
.conversation-message-body {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--font-black-clair);
    line-height: 1.55;
    padding: 0 14px 0 50px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Edited indicator */
.conversation-message-edited {
    font-size: 11px;
    font-weight: 400;
    color: var(--font-gray);
    font-style: italic;
    user-select: none;
    margin-left: 0;
    padding-left: 50px;
}

/* Attachments row */
.conversation-message-attachments {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 14px 4px 50px;
    box-sizing: border-box;
}

.conversation-message-attachment {
    position: relative;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: var(--radius-small);
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: border-color var(--transition-fast) ease;
    flex-shrink: 0;
}

.conversation-message-attachment:hover {
    border-color: var(--purple-dark);
}

.conversation-message-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-message-attachment.unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
    border-style: dashed;
    background: color-mix(in srgb, var(--font-gray) 6%, transparent);
    cursor: default;
}

.conversation-message-attachment.unavailable:hover {
    border-color: var(--border-color);
}

.conversation-attachment-unavailable {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    color: var(--font-gray);
}

.conversation-message-attachment-icon {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--bg-white);
}

/* Footer row: only rendered when there is state to show (reactions, thread). */
.conversation-message-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px 0 50px;
}
.conversation-message-footer-right {
    display: inline-flex;
    align-items: center;
}

/* ----------------------------------------------------------
   5. Reactions
   ---------------------------------------------------------- */

.conversation-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-big);
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--font-gray);
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease,
                border-color var(--transition-fast) ease,
                color var(--transition-fast) ease;
    user-select: none;
    flex-shrink: 0;
}
.conversation-reaction-btn svg {
    width: 14px;
    height: 14px;
}

.conversation-reaction-btn:hover {
    background-color: var(--hover-color);
    border-color: var(--font-gray);
}

.conversation-reaction-btn.active {
    background-color: rgba(125, 92, 255, 0.12);
    border-color: rgba(125, 92, 255, 0.3);
    color: var(--purple-dark);
}

.conversation-reaction-btn.active:hover {
    background-color: rgba(125, 92, 255, 0.18);
}

.conversation-reaction-count {
    font-size: 11px;
    font-weight: 600;
    
}

/* ----------------------------------------------------------
   6. Reply Threads
   ---------------------------------------------------------- */

.conversation-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-mini);
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--font-gray);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease,
                color var(--transition-fast) ease;
    user-select: none;
}

.conversation-reply-btn:hover {
    background-color: var(--hover-color);
    color: var(--font-gray-clair);
}

/* "N replies" toggle with stacked avatars */
.conversation-replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    height: 24px;
    padding: 0 8px;
    user-select: none;
    transition: opacity var(--transition-fast) ease;
    background-color: transparent;
    border: none;
    color: var(--font-gray);
    font-size: 11px;
    border-radius: var(--radius-mini);
}
.conversation-edit-btn,
.conversation-delete-btn {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-mini);
    color: var(--font-gray);
    font-size: 11px;
}
.conversation-edit-btn svg,
.conversation-delete-btn svg {
    width: 14px;
    height: 14px;
}

.conversation-edit-cancel,
.conversation-edit-save {
    height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-mini);
    border: none;
    font-size: 11px;
    color: var(--font-gray);
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease,
                color var(--transition-fast) ease;
}

.conversation-edit-btn:hover,
.conversation-delete-btn:hover,
.conversation-edit-cancel:hover,
.conversation-replies-toggle:hover {
    background-color: var(--hover-color);
    color: var(--font-gray-clair);
}

.conversation-replies-toggle-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--purple-dark);
    white-space: nowrap;
}

/* Overlapping avatars */
.conversation-replies-avatars {
    display: flex;
    flex-direction: row;
    height: 20px;
}
.conversation-message-footer-right {    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.conversation-replies-avatars .conversation-reply-avatar-img,
.conversation-replies-avatars .conversation-reply-avatar-initials {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: var(--bg-white);
    background-color: var(--purple-dark);
    flex-shrink: 0;
}

.conversation-replies-avatars .conversation-reply-avatar-img + .conversation-reply-avatar-img,
.conversation-replies-avatars .conversation-reply-avatar-img + .conversation-reply-avatar-initials,
.conversation-replies-avatars .conversation-reply-avatar-initials + .conversation-reply-avatar-img,
.conversation-replies-avatars .conversation-reply-avatar-initials + .conversation-reply-avatar-initials {
    margin-left: -6px;
}

.conversation-replies-avatars .conversation-reply-avatar-img {
    object-fit: cover;
}

/* Reply thread input row */
.conversation-reply-input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 2px 50px;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
}

/* Collapsible replies container */
.conversation-replies-container {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
    margin-left: 50px;
    margin-top: 4px;
}

.conversation-replies-container.open {
    display: flex;
}

.conversation-replies-container .conversation-message {
    padding: 8px 12px;
}

.conversation-replies-container .conversation-message-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    font-size: 9px;
}

.conversation-replies-container .conversation-message-name {
    font-size: 11px;
}

.conversation-replies-container .conversation-message-body {
    font-size: 12px;
}

/* ----------------------------------------------------------
   7. Input Area
   ---------------------------------------------------------- */

/* Outer column container */
.conversation-input-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Attachment previews strip above input */
.conversation-attachments-preview {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.conversation-attachments-preview:empty {
    display: none;
}

.conversation-attachment-preview-item {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-small);
    overflow: hidden;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.conversation-attachment-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-attachment-preview-item .conversation-attachment-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--font-gray);
}

.conversation-attachment-preview-item .conversation-attachment-preview-icon svg {
    width: 18px;
    height: 18px;
}

.conversation-attachment-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color var(--transition-fast) ease;
}

.conversation-attachment-preview-remove:hover {
    background-color: rgba(0, 0, 0, 0.88);
}

.conversation-attachment-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.70);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color var(--transition-fast) ease,
                transform var(--transition-fast) ease;
    flex-shrink: 0;
}

.conversation-attachment-remove svg {
    width: 9px;
    height: 9px;
}

.conversation-attachment-remove:hover {
    background-color: #ef4444;
    transform: scale(1.1);
}

/* Inner row: [+ btn] [input] [send btn] */
.conversation-input-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
    background-color: var(--bg-blue-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);
    padding: 4px 6px;
    box-sizing: border-box;
    transition: border-color var(--transition-fast) ease;
}

.conversation-input-row:focus-within {
    border-color: var(--purple-dark);
}

/* Contenteditable input — no border, lives inside the row */
.conversation-text-input {
    flex: 1;
    min-height: 30px;
    max-height: 110px;
    padding: 4px 6px;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--font-gray-clair);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    overflow-y: auto;
    outline: none;
    resize: none;
    word-break: break-word;
    white-space: pre-wrap;
}

.conversation-text-input:empty::before {
    content: attr(data-placeholder);
    color: var(--font-gray);
    pointer-events: none;
}

/* + Attach button — inline before input */
.conversation-attachment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: var(--radius-small);
    border: none;
    background-color: transparent;
    color: var(--font-gray);
    cursor: pointer;
    transition: background-color var(--transition-fast) ease,
                color var(--transition-fast) ease;
    flex-shrink: 0;
    padding: 0;
    align-self: flex-end;
    margin-bottom: 2px;
}

.conversation-attachment-btn svg {
    width: 16px;
    height: 16px;
}

.conversation-attachment-btn:hover {
    background-color: var(--hover-color);
    color: var(--font-gray-clair);
}

/* Send button — inline after input */
.conversation-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: var(--radius-small);
    border: none;
    background-color: var(--purple-dark);
    color: #fff;
    cursor: pointer;
    transition: filter var(--transition-fast) ease,
                transform var(--transition-fast) ease;
    flex-shrink: 0;
    padding: 0;
    align-self: flex-end;
    margin-bottom: 1px;
}

.conversation-send-btn svg {
    width: 13px;
    height: 13px;
}

.conversation-send-btn:hover {
    filter: brightness(1.12);
}

.conversation-send-btn:active {
    transform: scale(0.93);
}

.conversation-send-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ----------------------------------------------------------
   8. Mention Dropdown
   ---------------------------------------------------------- */

.conversation-mention-dropdown {
    position: fixed;
    z-index: 1000;
    min-width: 200px;
    max-width: 280px;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--bg-blue-dark-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    box-sizing: border-box;
    display: none;
}

.conversation-mention-dropdown.visible {
    display: block;
}

.conversation-mention-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: background-color var(--transition-fast) ease;
}

.conversation-mention-item:hover,
.conversation-mention-item.active {
    background-color: var(--hover-color);
}

.conversation-mention-item-avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--bg-white);
    background-color: var(--purple-dark);
    flex-shrink: 0;
}

.conversation-mention-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-mention-item-name {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--font-gray-clair);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.conversation-mention-item-role {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
}

/* Permission-level badges — dropdown role chips */
.conversation-mention-item-role[data-permissions-level="admin"] {
    background-color: var(--purple-clear);
    color: var(--purple-dark);
}

.conversation-mention-item-role[data-permissions-level="approver"] {
    background-color: #51cc5d1A;
    color: var(--green-ink);
}

.conversation-mention-item-role[data-permissions-level="creator"] {
    background-color: #38b6ff1A;
    color: var(--selection-blue-2);
}

.conversation-mention-item-role[data-permissions-level="reader"] {
    background-color: #febe091A;
    color: #ff914d;
}

.conversation-mention-item-role[data-permissions-level="client"] {
    background-color: color-mix(in srgb, var(--portal-primary, var(--purple-dark)) 12%, transparent);
    color: var(--portal-primary, var(--purple-dark));
}

/* Inline @mention tags in messages */
.conversation-mention-tag {
    display: inline;
    font-size: inherit;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    cursor: default;
    white-space: nowrap;
}

.conversation-mention-tag[data-permissions-level="admin"] {
    background-color: var(--purple-clear);
    color: var(--purple-dark);
}

.conversation-mention-tag[data-permissions-level="approver"] {
    background-color: #51cc5d1A;
    color: var(--green-ink);
}

.conversation-mention-tag[data-permissions-level="creator"] {
    background-color: #38b6ff1A;
    color: var(--selection-blue-2);
}

.conversation-mention-tag[data-permissions-level="reader"] {
    background-color: #febe091A;
    color: #ff914d;
}

.conversation-mention-tag[data-permissions-level="client"] {
    background-color: color-mix(in srgb, var(--portal-primary, var(--purple-dark)) 12%, transparent);
    color: var(--portal-primary, var(--purple-dark));
}

/* ----------------------------------------------------------
   9. Stored Notifications in Dropdown
   ---------------------------------------------------------- */

.stored-notification {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease;
    border-radius: var(--radius-small);
    position: relative;
}

.stored-notification:hover {
    background-color: var(--hover-color);
}

.stored-notification-profile-expired {
    cursor: default;
}

.stored-notification-profile-expired:hover {
    background-color: rgba(125, 92, 255, 0.04);
}

/* Unread state */
.stored-notification.unread {
    background-color: rgba(125, 92, 255, 0.04);
}

.stored-notification.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background-color: var(--purple-dark);
}

/* Avatar */
.stored-notification-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--bg-white);
    background-color: var(--purple-dark);
    flex-shrink: 0;
}

.stored-notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stored-notification-profile-avatar {
    overflow: visible;
    background-color: transparent;
}

.stored-notification-profile-avatar .profile-pic-container {
    width: 32px;
    height: 32px;
}

.stored-notification-profile-avatar .profile-pic {
    width: 32px;
    height: 32px;
}

.stored-notification-profile-avatar .platform-icon {
    width: 14px;
    height: 14px;
}

/* Body */
.stored-notification-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.stored-notification-text {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--font-gray-clair);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stored-notification-text strong {
    font-weight: 600;
}

.stored-notification-time {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--font-gray);
    line-height: 1.3;
}

.stored-notification-preview {
    margin: 0;
    font-size: 11px;
    color: var(--font-gray);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brand-creation-notif-progress {
    margin-top: 6px;
}

.brand-creation-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background-color: var(--border-color);
    overflow: hidden;
}

.brand-creation-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.34) 45%, transparent 70%),
        var(--purple-dark);
    background-size: 180px 100%, 100% 100%;
    transition: width 0.35s ease;
    /* Fast, small pulse (0.7s) so the bar always reads as alive between the
       slower percentage steps — dynamism without big movement. */
    animation: brandCreationProgressShimmer 0.9s linear infinite,
               brandCreationProgressPulse 0.7s ease-in-out infinite;
}

@keyframes brandCreationProgressShimmer {
    0% {
        background-position: -180px 0, 0 0;
    }
    100% {
        background-position: 180px 0, 0 0;
    }
}

@keyframes brandCreationProgressPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
}

.brand-creation-notif-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
    font-size: 11px;
    color: var(--font-gray-clair);
}

.brand-creation-rotating-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-creation-progress-percent {
    flex-shrink: 0;
    font-weight: 600;
}

.brand-creation-notif-summary {
    margin-top: 4px;
    font-size: 11px;
    color: var(--font-gray);
    line-height: 1.45;
}

.brand-creation-notif-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    gap: var(--gap-mini);
    padding: 0 9px;
    border-radius: var(--radius-mini);
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    color: var(--font-gray-clair);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.brand-creation-notif-action:hover {
    background-color: var(--hover-color);
    color: var(--font-black);
    border-color: var(--blue);
}

.stored-notification-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.inbox-notif-reply-btn {
    gap: 5px;
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--font-gray);
}

.inbox-notif-reply-btn:hover {
    background-color: var(--hover-color);
    color: var(--font-black);
    border-color: var(--blue);
}

.inbox-notif-reply-btn .ai-svg-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.external-mention-open-btn {
    gap: 5px;
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--font-gray);
}

.external-mention-open-btn:hover {
    background-color: var(--hover-color);
    color: var(--font-black);
    border-color: var(--blue);
}

.external-mention-open-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Mark as read button */
.stored-notification-mark-read {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-mini);
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--font-gray);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast) ease,
                color var(--transition-fast) ease;
    padding: 0;
}
.stored-notification-mark-read svg {
    width: 14px;
    height: 14px;
}

.stored-notification-mark-read:hover {
    background-color: var(--hover-color);
    color: var(--font-gray-clair);
}

/* Bell icon red dot */
#notification-red-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    border: 2px solid var(--surface);
    pointer-events: none;
    z-index: 1;
}

#notification-red-dot.hidden {
    display: none;
}

/* Divider between stored and progress notifications */
#stored-notifications-divider {
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--border-color);
    margin: 4px 0;
}

/* ----------------------------------------------------------
   10. Unread Badge
   ---------------------------------------------------------- */

.conversation-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    /* Neutral count chip (Codex-pass): red is reserved for genuine failures, and a
       count that is always on screen is information, not an alarm. */
    background-color: var(--bg-blue-dark);
    color: var(--font-gray);
    font-size: 10px;
    font-weight: 600;
    
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
}

.conversation-unread-badge.hidden {
    display: none;
}

/* ----------------------------------------------------------
   12. Composer bar (shared with the client portal)
   Same shell as the inbox composer: the field on top of a rounded plate,
   tools on the left (emoji, attachment), counter + "Send ⌘↵" on the right.
   ---------------------------------------------------------- */

.conversation-input-area {
    gap: 0;
    padding: 10px 16px 16px;
    border-top: none;
    background: transparent;
}

/* The plate floats on the wallpaper (translucent + blur), the way the inbox
   composer does; nothing paints a band behind it. */
.conversation-composer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 80%, transparent 20%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 90%, transparent 10%);
    transition: box-shadow 0.15s ease;
}

.conversation-composer:focus-within {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent, var(--purple-dark)) 55%, var(--border-color) 45%);
}

.conversation-composer .conversation-attachments-preview {
    padding: 4px 8px 0;
}

.conversation-composer .conversation-input-row {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.conversation-composer .conversation-input-row:focus-within {
    border-color: transparent;
}

.conversation-composer .conversation-text-input {
    min-height: 40px;
    max-height: 180px;
    padding: 10px 8px 4px;
    color: var(--font-black);
    font-size: 13px;
    line-height: 1.45;
}

.conversation-composer .conversation-text-input:focus,
.conversation-composer .conversation-text-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.conversation-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 32px;
}

.conversation-composer-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.conversation-composer-tool,
.conversation-composer .conversation-attachment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin: 0;
    padding: 0;
    align-self: auto;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--font-gray);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.conversation-composer-tool:hover:not([disabled]),
.conversation-composer .conversation-attachment-btn:hover:not([disabled]) {
    background: var(--hover-color);
    color: var(--font-black);
}

.conversation-composer-tool svg,
.conversation-composer .conversation-attachment-btn svg {
    width: 16px;
    height: 16px;
}

/* The picker pops above the bar; tokens keep it on the app's surface in
   both themes. */
.conversation-emoji-picker {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    height: 320px;
    width: 320px;
    border-radius: var(--radius-small);
    box-shadow: 0 12px 30px rgba(15, 18, 30, 0.18);
    --background: var(--surface);
    --border-color: var(--border-color);
    --input-border-color: var(--border-color);
    --input-font-color: var(--font-black);
    --category-font-color: var(--font-gray);
    --indicator-color: var(--accent, var(--purple-dark));
    --button-hover-background: var(--hover-color);
    --button-active-background: var(--hover-color);
    --emoji-size: 1.3rem;
    --num-columns: 8;
}

.conversation-emoji-picker.is-open {
    display: block;
}

.conversation-composer-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.conversation-composer-count {
    color: var(--font-gray);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.conversation-composer-count.is-over {
    color: var(--error, #c60404);
    opacity: 1;
}

.conversation-composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 32px;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 0 14px;
    align-self: auto;
    /* Concentric with the 18px plate it sits 8px inside of: 18 - 8 = 10. */
    border-radius: var(--radius-big);
    border: none;
    background: var(--accent-ui-gradient, linear-gradient(135deg, var(--purple-dark), var(--purple-dark)));
    box-shadow: 0 2px 8px var(--accent-ui-glow, rgba(0, 0, 0, 0.12));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.conversation-composer-send:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.conversation-composer-send:active {
    transform: none;
}

.conversation-composer-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.conversation-composer-send kbd {
    font-family: inherit;
    font-size: 10px;
    opacity: 0.7;
}

.conversation-composer-send svg {
    width: 16px;
    height: 16px;
}

/* Reply mode: "Replying to <author>" sits inside the plate, above the field,
   with the cross that drops back to a normal message (inbox twin). */
.conversation-composer-reply-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 2px 0;
    padding: 6px 8px 6px 10px;
    border-left: 2px solid var(--accent, var(--purple-dark));
    border-radius: calc(var(--radius-small, 8px) - 2px);
    background: color-mix(in srgb, var(--accent, var(--purple-dark)) 8%, transparent 92%);
}

.conversation-composer-reply-banner[hidden] {
    display: none;
}

/* Editing: attachments are not part of an edit, the strip waits with the draft. */
.conversation-composer.is-editing .conversation-attachments-preview {
    display: none;
}

.conversation-composer-reply-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.conversation-composer-reply-copy strong {
    color: var(--font-black);
    font-size: 12px;
    font-weight: 600;
}

.conversation-composer-reply-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--font-gray);
    font-size: 12px;
}

.conversation-composer-reply-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--font-gray);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.conversation-composer-reply-close:hover {
    background: var(--hover-color);
    color: var(--font-black);
}

.conversation-composer-reply-close svg {
    width: 14px;
    height: 14px;
}

/* Hosts that already frame the room: no second box, the room bleeds to the
   host's edges and only the host's corners round. */
.inbox-team-chat-embed .conversation-wrapper.chat-wallpaper,
#workspace-conversation-embed .conversation-wrapper.chat-wallpaper,
#modal-new-publication-chat-panel .conversation-wrapper.chat-wallpaper,
#post-preview-chat-panel .conversation-wrapper.chat-wallpaper,
#support-hub-conversation .conversation-wrapper.chat-wallpaper,
.brand-conversation-body .conversation-wrapper.chat-wallpaper {
    border-radius: 0;
}

#workspace-conversation-embed {
    padding: 0;
}

#modal-new-publication-chat-panel,
#post-preview-chat-panel {
    padding: 0;
}


/* ==================== NO KEYBOARD, NO KEYBOARD HINT =========================
   Every composer paints its shortcut as `<kbd aria-hidden="true">⌘ ↵</kbd>`
   beside the Send label (inbox, team/brand channels, and the public portal —
   all three render the same markup). On a touch device there is no ⌘ and no
   Return key to press, so the badge is a promise the device cannot keep, and it
   costs ~40px of a 390px composer bar that the label and the icon both want.
   It is already aria-hidden, so nothing is lost to a screen reader either.
   This lives in conversations.css and not mobile.css on purpose: the public
   portal loads THIS file and not mobile.css, and it carries the same button. */
@media (hover: none), (max-width: 600px) {
    kbd[aria-hidden="true"] {
        display: none;
    }
}