/* 络聊布局：令牌与组件来自 /vendor/blora-design（@bloret-crew/blora-design） */

.chat-layout {
    --chat-list-width: 280px;
    --chat-profile-width: 320px;
}

html.chat-app-open,
body.chat-app-open {
    overscroll-behavior-x: none;
}

/* 络聊里收起全站「新建」悬浮菜单，避免挡住输入条；主侧边栏始终保留 */
html.chat-app-open #fab-wrap,
body.chat-app-open #fab-wrap,
html.chat-app-open #fab-btn,
body.chat-app-open #fab-btn,
html.chat-app-open #new-menu,
body.chat-app-open #new-menu,
html.chat-app-open #fab-hidden-hint,
body.chat-app-open #fab-hidden-hint {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.chat-app-open .main-content {
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.chat-app-open #main-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

body.chat-app-open .chat-layout {
    flex: 1;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-canvas);
    color: var(--blora-color-text-primary);
    gap: 0;
    padding: 0;
    box-sizing: border-box;
}

body.chat-app-open .chat-sidebar,
body.chat-app-open .chat-main,
body.chat-app-open .chat-profile {
    background: var(--blora-color-surface-default);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
body.chat-app-open .chat-sidebar,
body.chat-app-open .chat-main,
body.chat-app-open .chat-profile {
    will-change: transform, opacity;
}
body.chat-app-open .chat-main.chat-thread-switching {
    animation: chat-thread-switch-in 220ms ease both;
}
@keyframes chat-thread-switch-in {
    from { opacity: 0.35; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}
body.chat-app-open .chat-sidebar {
    width: var(--chat-list-width);
    min-width: 240px;
    max-width: 360px;
    min-height: 0;
    position: relative;
    border-right: 1px solid var(--blora-color-border-subtle);
}
body.chat-app-open .chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--blora-color-surface-canvas);
}
body.chat-app-open .chat-profile {
    width: var(--chat-profile-width);
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-default);
}
body.chat-app-open .chat-layout.profile-open .chat-profile {
    display: flex;
    animation: chat-profile-in 220ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chat-profile-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    body.chat-app-open .chat-main.chat-thread-switching,
    body.chat-app-open .chat-layout.profile-open .chat-profile {
        animation: none;
    }
}

body.chat-app-open .chat-sidebar-header {
    padding: var(--blora-space-3) var(--blora-space-3) var(--blora-space-2);
    border-bottom: 1px solid var(--blora-color-border-subtle);
    gap: var(--blora-space-2);
}
body.chat-app-open .chat-sidebar-search {
    flex: 1;
    flex-direction: row;
    align-items: center;
    padding: 0;
    border: none;
    gap: var(--blora-space-2);
}
body.chat-app-open .chat-search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--blora-space-2);
    background: var(--blora-color-surface-raised);
    border-radius: var(--blora-radius-lg);
    padding: 0 var(--blora-space-3);
    min-height: 36px;
    border: 1px solid var(--blora-color-border-subtle);
}
body.chat-app-open .chat-search-pill .input,
body.chat-app-open #chat-rooms-search {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    font-size: var(--blora-text-sm);
    width: 100%;
    min-height: 0;
    outline: none;
    color: var(--blora-color-text-primary);
}
body.chat-app-open .chat-icon-round {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--blora-radius-sm);
    background: transparent;
    color: var(--blora-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.chat-app-open .chat-icon-round:hover {
    background: var(--blora-color-surface-raised);
    color: var(--blora-color-text-primary);
}

body.chat-app-open .chat-room-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 72px;
}
body.chat-app-open .chat-room-item.blora-list__item {
    display: block;
    flex-shrink: 0;
    align-items: center;
    padding: 0;
    min-height: 0;
}
body.chat-app-open .chat-room-item:last-child {
    border-bottom: none;
}
body.chat-app-open .chat-room-item:hover {
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-room-item.active {
    background: color-mix(in srgb, var(--blora-color-action-primary-default) 10%, transparent);
}
body.chat-app-open .chat-room-item-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: minmax(1.25em, auto) minmax(1.25em, auto);
    column-gap: var(--blora-space-3);
    row-gap: 2px;
    padding: var(--blora-space-3) var(--blora-space-4);
    align-items: center;
}
body.chat-app-open .chat-room-item-main > .chat-avatar-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;
}
body.chat-app-open .chat-room-item-main > .chat-room-title,
body.chat-app-open .chat-room-item-main > .chat-room-time {
    grid-row: 1;
    min-width: 0;
}
body.chat-app-open .chat-room-item-main > .chat-room-item-meta,
body.chat-app-open .chat-room-item-main > .chat-room-badges {
    grid-row: 2;
}
body.chat-app-open .chat-room-avatar {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-room-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--blora-color-text-on-accent);
    background: var(--blora-color-action-primary-default);
    font-size: 15px;
}
body.chat-app-open .chat-room-avatar.saved {
    background: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-room-avatar.archive {
    background: var(--blora-color-text-muted);
}
body.chat-app-open .chat-room-title {
    font-weight: 600;
    font-size: var(--blora-text-sm);
    color: var(--blora-color-text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
body.chat-app-open .chat-room-time {
    font-size: var(--blora-text-xs);
    color: var(--blora-color-text-subtle);
    justify-self: end;
    white-space: nowrap;
}
body.chat-app-open .chat-room-item-meta {
    grid-column: 2;
    margin-top: 0;
    min-width: 0;
}
body.chat-app-open .chat-room-preview {
    color: var(--blora-color-text-muted);
    font-size: var(--blora-text-xs);
}
body.chat-app-open .chat-room-preview.draft {
    color: var(--blora-color-action-primary-default);
    font-style: italic;
}
body.chat-app-open .chat-room-badges {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
body.chat-app-open .chat-unread-dot {
    background: var(--blora-color-action-primary-default);
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 650;
}
body.chat-app-open .chat-room-item.muted .chat-unread-dot {
    background: var(--blora-color-text-muted);
}
body.chat-app-open .chat-pin-mini,
body.chat-app-open .chat-mute-mini {
    font-size: 12px;
    opacity: 0.7;
}
body.chat-app-open .chat-room-kind { display: none; }
body.chat-app-open .chat-room-pin-btn,
body.chat-app-open .chat-room-hermes-settings-btn { display: none; }
body.chat-app-open .chat-layout.chat-sidebar-hidden > .chat-sidebar {
    display: none;
}
body.chat-app-open .chat-online-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--blora-color-status-success);
    border: 2px solid var(--blora-color-surface-default);
    right: 0;
    bottom: 0;
}
body.chat-app-open .chat-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    grid-row: 1 / span 2;
}

body.chat-app-open .chat-sidebar .blora-fab.blora-fab--static {
    position: absolute;
    right: var(--blora-space-4, 1rem);
    bottom: var(--blora-space-4, 1rem);
}

body.chat-app-open .chat-thread-header {
    padding: var(--blora-space-3) var(--blora-space-4);
    background: var(--blora-color-surface-default);
    border-bottom: 1px solid var(--blora-color-border-subtle);
    align-items: center;
    cursor: pointer;
}
body.chat-app-open .chat-thread-header-left { gap: var(--blora-space-3); }
body.chat-app-open [data-action="chat-back"] { display: none; }
body.chat-app-open .chat-thread-header-left > div { flex: 1; overflow: hidden; }
body.chat-app-open .chat-thread-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chat-app-open .chat-thread-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chat-app-open .chat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-thread-title {
    font-size: 15px;
    gap: 6px;
    color: var(--blora-color-text-primary);
}
body.chat-app-open .chat-bot-badge {
    font-size: var(--blora-text-xs);
    font-weight: 500;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-thread-sub { margin-top: 1px; color: var(--blora-color-text-muted); }
body.chat-app-open .chat-thread-actions { gap: 2px; }
body.chat-app-open .chat-header-btn,
body.chat-app-open .chat-mute-btn {
    background: transparent !important;
    border: none;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0 !important;
    border-radius: var(--blora-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blora-color-text-muted) !important;
}

body.chat-app-open .chat-messages {
    background: transparent;
    padding: var(--blora-space-4);
}
body.chat-app-open .chat-messages .blora-chat.chat-bubble-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
    align-items: start;
    width: 100%;
    max-width: 100%;
}
body.chat-app-open .chat-messages .blora-chat:not(.blora-chat--end) .blora-chat__avatar {
    align-self: start;
    margin-top: 2px;
}
body.chat-app-open .chat-messages .blora-chat.blora-chat--end {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}
body.chat-app-open .chat-messages .blora-chat--end .blora-chat__avatar {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}
body.chat-app-open .chat-messages .blora-chat--end .blora-chat__content {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}
body.chat-app-open .chat-bubble-body {
    max-width: min(72%, 520px);
}
body.chat-app-open .chat-bubble-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}
body.chat-app-open .blora-chat--end .chat-bubble-wrap {
    margin-inline-start: auto;
    align-items: flex-end;
}
body.chat-app-open .blora-chat__bubble {
    display: flow-root;
    padding-bottom: 0.65rem;
}
body.chat-app-open .chat-bubble-wrap--emoji-only {
    align-items: flex-end;
}
body.chat-app-open .chat-emoji-only {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 2px 0;
    color: var(--blora-color-text-primary);
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -0.08em;
    white-space: nowrap;
}
body.chat-app-open .blora-chat--end .chat-emoji-only {
    color: var(--blora-color-text-primary);
}
body.chat-app-open .chat-bubble-wrap--emoji-only .chat-time-row {
    width: 100%;
    margin-top: 2px;
}
body.chat-app-open .blora-chat--end .blora-chat__bubble a {
    color: var(--blora-color-text-on-accent);
    text-decoration: underline;
}
body.chat-app-open .chat-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    animation: chat-photo-viewer-enter var(--blora-duration-base) ease-out both;
}
@keyframes chat-photo-viewer-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}
body.chat-app-open .chat-photo-viewer.is-opening .chat-photo-viewer__content,
body.chat-app-open .chat-photo-viewer.is-switching .chat-photo-viewer__content {
    animation: chat-photo-image-enter var(--blora-duration-base) cubic-bezier(.22,.8,.26,1) both;
}
@keyframes chat-photo-image-enter {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(var(--chat-photo-zoom, 1)); }
}
body.chat-app-open .chat-photo-viewer__stage {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body.chat-app-open .chat-photo-viewer.is-zoomed .chat-photo-viewer__stage { overflow: auto; }
body.chat-app-open .chat-photo-viewer__content {
    position: relative;
    width: max-content;
    max-width: 100%;
    max-height: 100%;
    transform: scale(var(--chat-photo-zoom, 1));
    transition: transform var(--blora-duration-base) ease, opacity var(--blora-duration-base) ease;
    transform-origin: center;
    flex: none;
}
body.chat-app-open .chat-photo-viewer__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
body.chat-app-open .chat-photo-viewer__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
body.chat-app-open .chat-photo-viewer.is-annotating .chat-photo-viewer__canvas {
    pointer-events: auto;
    touch-action: none;
    cursor: crosshair;
}
body.chat-app-open .chat-photo-viewer__close {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
}
body.chat-app-open .chat-photo-viewer button[hidden] { display: none; }
body.chat-app-open .chat-photo-viewer__close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
body.chat-app-open .chat-photo-viewer__footer {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--blora-space-3);
    min-height: 32px;
}
body.chat-app-open .chat-photo-viewer__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--blora-space-1);
    padding: var(--blora-space-2);
    border: 1px solid var(--blora-color-border-subtle);
    border-radius: var(--blora-radius-lg);
    background: var(--blora-color-surface-raised);
    color: var(--blora-color-text-primary);
    box-shadow: var(--blora-shadow-3);
}
body.chat-app-open .chat-photo-viewer__tools .blora-button { width: auto; height: auto; min-height: 36px; padding: var(--blora-space-2); }
body.chat-app-open .chat-photo-viewer__tools .chat-photo-viewer__prev,
body.chat-app-open .chat-photo-viewer__tools .chat-photo-viewer__next { width: 36px; }
body.chat-app-open .chat-photo-viewer__count { min-width: 3em; text-align: center; font-size: var(--blora-text-sm); }
body.chat-app-open .chat-photo-viewer__separator { width: 1px; height: 24px; background: var(--blora-color-border-subtle); }
body.chat-app-open .chat-photo-viewer__tools .blora-button[hidden] { display: none; }
body.chat-app-open .chat-photo-viewer__tools .blora-button[aria-pressed="true"] {
    background: var(--blora-color-action-primary-soft);
    color: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-photo-viewer__tools .blora-button .sf-icon,
body.chat-app-open .chat-photo-viewer__tools .blora-button svg { width: 16px; height: 16px; }
body.chat-app-open .chat-photo-viewer__zoom { min-width: 3.5em; text-align: center; font-size: var(--blora-text-sm); }
body.chat-app-open .chat-photo-viewer__link { color: white; }
body.chat-app-open .chat-photo-viewer__status { font-size: var(--blora-text-sm); }
@media (prefers-reduced-motion: reduce) {
    body.chat-app-open .chat-photo-viewer,
    body.chat-app-open .chat-photo-viewer.is-opening .chat-photo-viewer__content,
    body.chat-app-open .chat-photo-viewer.is-switching .chat-photo-viewer__content { animation: none; }
    body.chat-app-open .chat-photo-viewer__content { transition: none; }
}
body.chat-app-open .chat-photo-viewer :focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (max-width: 480px) {
    body.chat-app-open .chat-photo-viewer { gap: 4px; padding-inline: 8px; }
    body.chat-app-open .chat-photo-viewer__close { width: 36px; height: 36px; }
}
body.chat-app-open .chat-image-link {
    display: block;
    width: max-content;
    max-width: 100%;
}
body.chat-app-open .chat-image-stack__count {
    color: var(--blora-color-action-primary-default);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 10px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
}
body.chat-app-open .chat-image-stack__count:focus-visible {
    outline: 2px solid var(--blora-color-action-primary-default);
    outline-offset: 3px;
    border-radius: 4px;
}
body.chat-app-open .chat-image-stack__index {
    margin-left: auto;
    color: var(--blora-color-text-muted);
    font-size: 12px;
    font-weight: 400;
}
body.chat-app-open .chat-image-stack {
    position: relative;
    width: min(300px, calc(64vw - 48px));
    height: min(320px, 68vw);
    margin: 32px 32px 0;
    isolation: isolate;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    cursor: grab;
}
body.chat-app-open .chat-image-stack__tile {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 22px;
    background: var(--blora-color-surface-raised);
    box-shadow: 0 8px 24px rgba(20, 30, 45, 0.16);
    transform: translate(calc(var(--image-stack-layer) * -10px), calc(var(--image-stack-layer) * -10px));
    z-index: calc(4 - var(--image-stack-layer));
    transition: transform 300ms cubic-bezier(.22,.8,.26,1), opacity 300ms ease;
}
body.chat-app-open .chat-image-stack__nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--blora-color-surface-raised) 85%, transparent);
    box-shadow: 0 2px 10px rgba(20, 30, 45, 0.18);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 180ms ease;
}
body.chat-app-open .chat-image-stack__nav--prev { left: 12px; }
body.chat-app-open .chat-image-stack__nav--next { right: 12px; }
body.chat-app-open .chat-image-stack:hover .chat-image-stack__nav,
body.chat-app-open .chat-image-stack:focus-within .chat-image-stack__nav {
    opacity: 1;
    pointer-events: auto;
}
body.chat-app-open .chat-image-stack__nav[hidden] { display: none; }
body.chat-app-open .chat-image-stack__nav:focus-visible {
    outline: 2px solid var(--blora-color-action-primary-default);
    outline-offset: 2px;
}
body.chat-app-open .chat-image-stack__nav .sf-icon { width: 18px; height: 18px; }
@media (hover: none) {
    body.chat-app-open .chat-image-stack__nav:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.chat-app-open .chat-image-stack__nav { transition: none; }
}
body.chat-app-open .chat-image-stack__tile.is-hidden {
    opacity: 0;
    pointer-events: none;
}
body.chat-app-open .chat-image-stack__tile.is-departing {
    transform: translate(-95%, 24%) rotate(-8deg);
    opacity: 0;
    pointer-events: none;
}
body.chat-app-open .chat-image-stack__tile.is-returning {
    transform: translate(-95%, 24%) rotate(-8deg);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    animation: chat-image-return 300ms cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes chat-image-return {
    to { transform: translate(0, 0) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.chat-app-open .chat-image-stack__tile { transition: none; }
    body.chat-app-open .chat-image-stack__tile.is-returning { animation: none; }
}
body.chat-app-open .chat-image-stack:active {
    cursor: grabbing;
}
body.chat-app-open .blora-chat--end .chat-image-stack__tile:not(.is-departing):not(.is-returning) {
    transform: translate(calc(var(--image-stack-layer) * 10px), calc(var(--image-stack-layer) * -10px));
}
body.chat-app-open .chat-image-stack__tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
body.chat-app-open .chat-image-stack[hidden],
body.chat-app-open .chat-image-gallery[hidden] {
    display: none;
}
body.chat-app-open .chat-image-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: min(360px, 72vw);
    margin: 0 12px;
}
body.chat-app-open .chat-image-gallery__remaining {
    grid-column: 1 / -1;
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-section-preview-error {
    font-size: 12px;
    color: var(--blora-color-status-negative, #c62828);
}
body.chat-app-open .chat-section-preview-error:empty { display: none; }
body.chat-app-open .chat-image-gallery__item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-image-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.chat-app-open .chat-image-stack-row .chat-bubble-wrap {
    max-width: 100%;
}
body.chat-app-open .chat-bubble-row:has(.chat-reactions) {
    margin-top: 8px;
}
body.chat-app-open .chat-bubble-wrap:has(.chat-reactions) {
    padding-top: 24px;
}
body.chat-app-open .chat-reactions-host:empty {
    display: none;
}
/* 整组回应是贴在气泡角上的一条胶囊。对方消息钉在右上角并向左收，自己的消息钉在左上角并向右收。 */
body.chat-app-open .chat-reactions-host {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 8px;
    left: auto;
    display: flex;
    justify-content: flex-end;
    width: max-content;
    max-width: min(200px, calc(100vw - 96px));
    pointer-events: none;
}
body.chat-app-open .blora-chat--end .chat-reactions-host {
    right: auto;
    left: 8px;
    justify-content: flex-start;
}
body.chat-app-open .chat-reactions-host.is-shift-in {
    right: auto;
    left: calc(100% - 28px);
    justify-content: flex-start;
}
body.chat-app-open .blora-chat--end .chat-reactions-host.is-shift-in {
    left: auto;
    right: calc(100% - 28px);
    justify-content: flex-end;
}
body.chat-app-open .chat-reactions-host:has(.chat-reactions.is-expanded) {
    z-index: 4;
}
body.chat-app-open .chat-reactions {
    --chat-reaction-bg: var(--blora-color-surface-raised);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    width: max-content;
    max-width: inherit;
    min-width: 0;
    margin: 0;
    padding: 3px 8px 3px 7px;
    border-radius: 999px;
    background: var(--chat-reaction-bg);
    box-shadow:
        0 0 0 0.5px color-mix(in srgb, var(--blora-color-text-primary) 16%, transparent),
        0 1px 2px rgba(29, 27, 32, 0.12);
    pointer-events: auto;
}
body.chat-app-open .chat-bubble-row.mine .chat-reactions,
body.chat-app-open .blora-chat--end .chat-reactions,
body.chat-app-open .chat-reactions-host.is-shift-in .chat-reactions {
    justify-content: flex-start;
}
body.chat-app-open .blora-chat--end .chat-reactions-host.is-shift-in .chat-reactions {
    justify-content: flex-end;
}
body.chat-app-open .chat-reactions::before,
body.chat-app-open .chat-reactions::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--chat-reaction-bg);
    pointer-events: none;
}
body.chat-app-open .chat-reactions::before {
    width: 9px;
    height: 9px;
    right: 12px;
    bottom: -4px;
}
body.chat-app-open .chat-reactions::after {
    width: 5px;
    height: 5px;
    right: 5px;
    bottom: -9px;
}
body.chat-app-open .blora-chat--end .chat-reactions::before,
body.chat-app-open .chat-reactions-host.is-shift-in .chat-reactions::before {
    right: auto;
    left: 10px;
}
body.chat-app-open .blora-chat--end .chat-reactions::after,
body.chat-app-open .chat-reactions-host.is-shift-in .chat-reactions::after {
    right: auto;
    left: 4px;
}
body.chat-app-open .blora-chat--end .chat-reactions-host.is-shift-in .chat-reactions::before {
    left: auto;
    right: 10px;
}
body.chat-app-open .blora-chat--end .chat-reactions-host.is-shift-in .chat-reactions::after {
    left: auto;
    right: 4px;
}
body.chat-app-open .chat-reaction-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 1px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 1px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
body.chat-app-open .chat-reaction-pill.is-extra {
    display: none;
}
body.chat-app-open .chat-reactions.is-expanded .chat-reaction-pill.is-extra {
    display: inline-flex;
}
body.chat-app-open .chat-reaction-emoji {
    display: block;
    font-size: 20px;
    line-height: 1;
}
body.chat-app-open .chat-reaction-count {
    color: var(--blora-color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}
body.chat-app-open .chat-reaction-pill.me {
    background: transparent;
    color: inherit;
}
body.chat-app-open .chat-reaction-pill.me .chat-reaction-count {
    color: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-reaction-pill:hover,
body.chat-app-open .chat-reaction-pill:focus-visible,
body.chat-app-open .chat-reaction-pill.me:hover,
body.chat-app-open .chat-reaction-pill.me:focus-visible {
    background: color-mix(in srgb, var(--blora-color-text-primary) 8%, transparent);
}
body.chat-app-open .chat-reaction-pill:active {
    transform: none;
    opacity: 0.72;
}
body.chat-app-open .chat-reaction-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 22px;
    min-width: 22px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--blora-color-text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
body.chat-app-open .chat-reaction-more:hover,
body.chat-app-open .chat-reaction-more:focus-visible {
    background: color-mix(in srgb, var(--blora-color-text-primary) 8%, transparent);
}
body.chat-app-open .chat-time-row {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    pointer-events: none;
}
body.chat-app-open .blora-chat__bubble > .chat-time-row {
    float: none;
    clear: both;
    width: 100%;
    margin: 5px 0 0;
}
body.chat-app-open .chat-bubble-wrap--media > .chat-time-row {
    align-self: flex-end;
    margin-top: 4px;
}
body.chat-app-open .chat-forward-bundle > .chat-time-row {
    float: none;
    width: 100%;
    margin-top: 6px;
}
body.chat-app-open .chat-time {
    display: inline;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.72;
    margin: 0;
    color: var(--blora-color-text-subtle);
}
body.chat-app-open .blora-chat--end .chat-time {
    color: var(--blora-color-text-on-accent);
    opacity: 0.8;
}
body.chat-app-open .blora-chat--end .chat-bubble-wrap--media .chat-time,
body.chat-app-open .chat-forward-bundle .chat-time {
    color: var(--blora-color-text-subtle);
    opacity: 0.72;
}
body.chat-app-open .chat-read-label {
    text-align: right;
    font-size: 12px;
    color: var(--blora-color-text-muted, var(--text-secondary));
    padding: 0 4px 10px;
}
body.chat-app-open .chat-read-label--message {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 2px 0;
    line-height: 1.2;
    text-align: right;
    /* main.css slides every .chat-read-label in; receipts dissolve in place instead. */
    animation: none;
}
body.chat-app-open .chat-read-label__line {
    grid-area: 1 / 1;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    color: var(--blora-color-text-muted, var(--text-secondary));
    font-weight: 400;
    line-height: 1.2;
}
body.chat-app-open .chat-read-label__line.is-fading-out {
    animation: chat-read-fade-out 300ms ease-in-out forwards;
    pointer-events: none;
}
body.chat-app-open .chat-read-label__line.is-fading-in {
    animation: chat-read-fade-in 300ms ease-in-out both;
}
body.chat-app-open .chat-read-label--message.is-entering {
    animation: chat-read-fade-in 300ms ease-in-out both;
}
body.chat-app-open .chat-read-label--message.is-leaving {
    animation: chat-read-fade-out 300ms ease-in-out forwards;
    pointer-events: none;
}
@keyframes chat-read-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes chat-read-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.chat-app-open .chat-read-label--message.is-entering,
    body.chat-app-open .chat-read-label--message.is-leaving,
    body.chat-app-open .chat-read-label__line.is-fading-in,
    body.chat-app-open .chat-read-label__line.is-fading-out {
        animation: none;
    }
}
body.chat-app-open .chat-read-label--message[data-status="read"] {
    color: var(--blora-color-action-primary-default, #0a84ff);
    font-weight: 500;
}
body.chat-app-open .chat-read-label__line[data-status="read"] {
    color: var(--blora-color-action-primary-default, #0a84ff);
    font-weight: 500;
}
body.chat-app-open .chat-read-label[data-status="read"] {
    color: var(--blora-color-action-primary-default, #0a84ff);
    font-weight: 500;
}
body.chat-app-open .chat-pin-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-default);
    flex-shrink: 0;
}
body.chat-app-open .chat-pin-bar[hidden] { display: none !important; }
body.chat-app-open .chat-pin-bar-main {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    padding: 2px 4px;
}
body.chat-app-open .chat-pin-bar-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-pin-bar-text {
    display: block;
    font-size: var(--blora-text-sm);
    color: var(--blora-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chat-app-open .chat-e2ee-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-raised);
    flex-shrink: 0;
    font-size: var(--blora-text-sm);
    color: var(--blora-color-text-secondary);
}
body.chat-app-open .chat-e2ee-bar[hidden] { display: none !important; }
body.chat-app-open .chat-e2ee-bar-ico {
    display: flex;
    flex-shrink: 0;
}
body.chat-app-open .chat-e2ee-bar-text {
    flex: 1;
    min-width: 0;
}
body.chat-app-open .chat-e2ee-lock {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}
body.chat-app-open .chat-e2ee-mini {
    display: inline-flex;
}
body.chat-app-open .chat-e2ee-undecryptable {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blora-color-text-muted);
    font-style: italic;
}
body.chat-app-open .chat-unread-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
    color: var(--blora-color-action-primary-default);
    font-size: var(--blora-text-xs);
    font-weight: 650;
}
body.chat-app-open .chat-unread-sep::before,
body.chat-app-open .chat-unread-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--blora-color-action-primary-default) 40%, transparent);
}
body.chat-app-open .chat-switch {
    margin-left: auto;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--blora-color-border-subtle);
    position: relative;
    flex-shrink: 0;
}
body.chat-app-open .chat-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}
body.chat-app-open .chat-switch.on {
    background: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-switch.on::after { transform: translateX(16px); }
body.chat-app-open .chat-date-sep span {
    background: var(--blora-color-surface-raised);
    color: var(--blora-color-text-muted);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}
body.chat-app-open .chat-spotify-jam {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(360px, 100%);
    box-sizing: border-box;
    padding: 14px;
    margin: 4px 0 6px;
    border-radius: var(--blora-radius-lg);
    background: #172b20;
    color: #fff;
    text-align: left;
    text-decoration: none;
}
body.chat-app-open .chat-spotify-jam:hover,
body.chat-app-open .chat-spotify-jam:focus-visible {
    background: #21402d;
}
body.chat-app-open .chat-spotify-jam-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1ed760;
    color: #102517;
    font-size: 28px;
}
body.chat-app-open .chat-spotify-jam-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
body.chat-app-open .chat-spotify-jam-site { font-size: 11px; color: #a8e8b8; }
body.chat-app-open .chat-spotify-jam-title { font-size: 16px; font-weight: 700; }
body.chat-app-open .chat-spotify-jam-desc { font-size: 12px; color: #c4d7c9; }
body.chat-app-open .chat-spotify-jam-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #1ed760;
}
body.chat-app-open .chat-spotify-jam-action .sf-icon { width: 12px; height: 12px; }
@media (max-width: 480px) {
    body.chat-app-open .chat-spotify-jam { flex-wrap: wrap; }
    body.chat-app-open .chat-spotify-jam-action { margin-left: 56px; }
}
body.chat-app-open .chat-link-preview {
    display: block;
    margin: 4px 0 6px;
    border-radius: var(--blora-radius-sm);
    overflow: hidden;
    border: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-raised);
    text-decoration: none;
    color: inherit;
    max-width: 360px;
    text-align: left;
}
body.chat-app-open .chat-link-preview > img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    display: block;
}
body.chat-app-open .chat-section-preview {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
body.chat-app-open .chat-section-preview-media {
    padding: 12px 0 8px;
}
body.chat-app-open .chat-image-stack {
    isolation: auto;
}
body.chat-app-open .chat-image-stack__tile.is-passed {
    transform: translate(calc(-1 * var(--passed-shift)), 12px) rotate(-5deg);
    opacity: 1;
    z-index: 0;
    pointer-events: auto;
}
body.chat-app-open .chat-image-stack__tile:not(.is-passed) {
    z-index: calc(4 - var(--image-stack-layer));
}
body.chat-app-open .chat-image-stack__tile.is-departing {
    animation: chat-section-image-pass 300ms cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes chat-section-image-pass {
    to { transform: translate(calc(-1 * var(--passed-shift)), 12px) rotate(-5deg); opacity: 1; }
}
body.chat-app-open .blora-chat--end .chat-image-stack__tile.is-passed:not(.is-returning):not(.is-departing) {
    transform: translate(calc(-1 * var(--passed-shift)), 12px) rotate(-5deg);
}
body.chat-app-open .chat-image-stack__tile.is-returning {
    transform: translate(calc(-1 * var(--passed-shift, 0px)), 12px) rotate(-5deg);
    animation: chat-section-image-return 300ms cubic-bezier(.22,.8,.26,1) forwards;
}
body.chat-app-open .blora-chat--end .chat-image-stack__tile.is-returning {
    animation: chat-section-image-return 300ms cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes chat-section-image-return {
    to { transform: translate(0, 0) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.chat-app-open .chat-image-stack__tile.is-departing,
    body.chat-app-open .chat-image-stack__tile.is-returning { animation: none; }
}
body.chat-app-open .chat-section-preview .chat-image-stack {
    width: min(260px, calc(64vw - 64px));
    height: min(260px, 58vw);
    margin: 28px auto 8px;
}
body.chat-app-open .chat-section-preview .chat-image-stack__count {
    padding: 0 16px;
}
body.chat-app-open .chat-section-preview .chat-image-gallery {
    width: calc(100% - 24px);
    margin: 0 12px 8px;
}
body.chat-app-open .chat-section-preview-link {
    display: block;
    border-left: 0;
    color: inherit;
    text-decoration: none;
}
body.chat-app-open .chat-section-preview-link .chat-link-preview-title {
    display: block;
}
body.chat-app-open .chat-link-preview-body {
    padding: 8px 10px 10px;
    border-left: 3px solid var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-link-preview-site {
    font-size: 11px;
    color: var(--blora-color-action-primary-default);
    font-weight: 700;
}
body.chat-app-open .chat-link-preview-title {
    font-weight: 650;
    font-size: var(--blora-text-sm);
    margin-top: 2px;
}
body.chat-app-open .chat-link-preview-desc {
    font-size: var(--blora-text-xs);
    color: var(--blora-color-text-muted);
    margin-top: 2px;
}
body.chat-app-open .chat-link-preview--bbs {
    border-color: color-mix(in srgb, var(--blora-color-action-primary-default) 45%, var(--blora-color-border-subtle));
}
body.chat-app-open .chat-link-preview--bbs .chat-link-preview-body {
    border-left-color: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-section-preview .chat-section-preview-link {
    border-left: 0;
}
body.chat-app-open .chat-link-preview--linuxdo .chat-link-preview-body {
    border-left-color: #d99e2b;
}
body.chat-app-open .chat-link-preview--linuxdo .chat-link-preview-site {
    color: #b7821f;
}
body.chat-app-open .chat-link-preview-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-link-preview-author {
    font-weight: 600;
    color: var(--blora-color-text-secondary);
}
body.chat-app-open .chat-link-preview-tag {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    background: color-mix(in srgb, #d99e2b 16%, transparent);
}
body.chat-app-open .chat-link-preview-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
body.chat-app-open .chat-link-preview-stats .sf-icon {
    width: 11px;
    height: 11px;
    margin-right: 3px;
    vertical-align: -1px;
}
body.chat-app-open .chat-jump-btn {
    position: absolute;
    right: 18px;
    bottom: 86px;
    width: 40px;
    height: 40px;
    border-radius: var(--blora-radius-lg);
    border: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-default);
    box-shadow: var(--blora-shadow-1);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 8;
    color: var(--blora-color-text-primary);
}
body.chat-app-open .chat-jump-btn.visible { display: inline-flex; }
body.chat-app-open .chat-jump-count {
    position: absolute;
    top: -6px;
    right: -4px;
    background: var(--blora-color-action-primary-default);
    color: var(--blora-color-text-on-accent);
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

body.chat-app-open .chat-select-bar[hidden],
body.chat-app-open .chat-reply-bar[hidden],
body.chat-app-open .chat-edit-bar[hidden],
body.chat-app-open .chat-image-preview[hidden],
body.chat-app-open .chat-media-panel[hidden],
body.chat-app-open .chat-typing-indicator[hidden],
body.chat-app-open .chat-read-label[hidden],
body.chat-app-open .chat-jump-btn[hidden],
body.chat-app-open .chat-jump-count[hidden],
body.chat-app-open .chat-time-row[hidden],
body.chat-app-open .blora-chat__meta[hidden] {
    display: none !important;
}
body.chat-app-open .chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--blora-color-text-muted);
    padding: 0 4px 10px;
    font-size: 13px;
}
body.chat-app-open #chat-presence-line.online {
    color: var(--blora-color-status-positive, #34c759);
    font-weight: 600;
}
body.chat-app-open .chat-select-bar {
    padding: var(--blora-space-3);
    background: var(--blora-color-surface-default);
    border-top: 1px solid var(--blora-color-border-subtle);
}
body.chat-app-open .chat-reply-bar,
body.chat-app-open .chat-image-preview,
body.chat-app-open .chat-edit-bar {
    padding: var(--blora-space-2) var(--blora-space-3) 0;
}
body.chat-app-open .chat-reply-bar-inner,
body.chat-app-open .chat-image-preview-inner {
    align-items: center;
    gap: var(--blora-space-3);
    min-width: 0;
    padding: 8px 12px;
    border: none;
    border-left: 3px solid var(--blora-color-action-primary-default);
    border-radius: var(--blora-radius-sm);
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-reply-bar-inner > div {
    min-width: 0;
    flex: 1;
}
body.chat-app-open .chat-reply-bar-label {
    color: var(--blora-color-action-primary-default);
}
body.chat-app-open .chat-reply-bar-text {
    max-width: none;
}
body.chat-app-open .chat-composer-wrap {
    background: var(--blora-color-surface-default);
    border-top: 1px solid var(--blora-color-border-subtle);
}
body.chat-app-open .chat-composer {
    align-items: center;
    padding: var(--blora-space-3);
    gap: 6px;
    flex-wrap: wrap;
}
body.chat-app-open .chat-composer .blora-textarea {
    min-width: 70px;
    width: 0;
    min-height: 2.5rem;
    max-height: 8rem;
    resize: none;
    flex: 1;
}
body.chat-app-open .chat-attach-menu .blora-button {
    width: 100%;
    justify-content: flex-start;
}
body.chat-app-open .chat-fmt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 7px var(--blora-space-3) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--blora-color-surface-default);
    border-top: 1px solid var(--blora-color-border-subtle);
    border-bottom: 1px solid var(--blora-color-border-subtle);
}
body.chat-app-open .chat-fmt-bar[hidden] {
    display: none !important;
}
body.chat-app-open .chat-fmt-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
body.chat-app-open .chat-fmt-divider {
    width: 1px;
    height: 20px;
    margin: 0 3px;
    background: var(--blora-color-border-subtle);
    flex-shrink: 0;
}
body.chat-app-open .chat-fmt-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: var(--blora-color-text-muted);
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
body.chat-app-open .chat-fmt-btn .sf-icon {
    width: 15px;
    height: 15px;
}
body.chat-app-open .chat-fmt-btn:hover {
    background: var(--blora-color-surface-raised);
    color: var(--blora-color-text-primary);
}
body.chat-app-open .chat-fmt-btn:active {
    transform: scale(.95);
}
@media (max-width: 768px) {
    body.chat-app-open .chat-fmt-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}
body.chat-app-open .blora-chat__bubble.chat-md {
    overflow-wrap: anywhere;
    word-break: break-word;
}
body.chat-app-open .chat-md-body {
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.45;
}
body.chat-app-open .chat-md-body > :first-child {
    margin-top: 0;
}
body.chat-app-open .chat-md-body > :last-child {
    margin-bottom: 0;
}
body.chat-app-open .chat-md-body p {
    margin: 0;
}
body.chat-app-open .chat-md-body p + p {
    margin-top: 0.45em;
}
body.chat-app-open .chat-md-body h1,
body.chat-app-open .chat-md-body h2,
body.chat-app-open .chat-md-body h3,
body.chat-app-open .chat-md-body h4 {
    margin: 0.55em 0 0.25em;
    font-size: 1em;
    font-weight: 750;
    line-height: 1.35;
}
body.chat-app-open .chat-md-body ul,
body.chat-app-open .chat-md-body ol {
    margin: 0.35em 0;
    padding-left: 1.35em;
    list-style: revert;
}
body.chat-app-open .chat-md-body ul {
    list-style-type: disc;
}
body.chat-app-open .chat-md-body ol {
    list-style-type: decimal;
}
body.chat-app-open .chat-md-body li {
    margin: 0.15em 0;
    display: list-item;
}
body.chat-app-open .chat-md-body li > p {
    margin: 0;
}
body.chat-app-open .chat-md-body blockquote {
    margin: 0.4em 0;
    padding: 0.15em 0 0.15em 0.7em;
    border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent);
    opacity: 0.92;
}
body.chat-app-open .chat-md-body hr {
    border: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    margin: 0.6em 0;
}
body.chat-app-open .chat-md-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
body.chat-app-open .chat-md-body pre {
    margin: 0.45em 0;
    padding: 8px 10px;
    border-radius: 10px;
    overflow-x: auto;
    max-width: 100%;
    background: color-mix(in srgb, #000 18%, transparent);
    -webkit-overflow-scrolling: touch;
}
body.chat-app-open .chat-md-body pre code {
    padding: 0;
    background: none;
    font-size: 12px;
    white-space: pre;
}
body.chat-app-open .blora-chat--end .chat-md-body pre {
    background: color-mix(in srgb, #000 22%, transparent);
}
body.chat-app-open .chat-md-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.chat-app-open .chat-md-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0.4em 0;
}
body.chat-app-open .chat-md-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 12px;
    margin: 0.4em 0;
}
body.chat-app-open .chat-md-body th,
body.chat-app-open .chat-md-body td {
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    padding: 4px 8px;
}
body.chat-app-open .chat-md-body th {
    font-weight: 650;
}

body.chat-app-open .chat-profile-cover {
    position: relative;
    height: 220px;
    flex-shrink: 0;
    background: var(--blora-color-surface-raised) center/cover no-repeat;
}
body.chat-app-open .chat-profile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.chat-app-open .chat-profile-cover-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
body.chat-app-open .chat-profile-cover-title { font-weight: 650; }
body.chat-app-open .chat-profile-cover-meta {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
body.chat-app-open .chat-profile-cover-meta strong {
    display: block;
    font-size: 20px;
}
body.chat-app-open .chat-profile-cover.is-editable {
    cursor: pointer;
}
body.chat-app-open .chat-profile-cover-hint {
    position: absolute;
    left: 16px;
    bottom: 52px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
body.chat-app-open .chat-profile-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px 12px;
}
body.chat-app-open .chat-profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-profile-field-hint {
    margin: 0;
    font-size: 12px;
    color: var(--blora-color-text-subtle);
}
body.chat-app-open .chat-profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
body.chat-app-open .chat-profile-actions {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.chat-app-open .chat-system-msg span {
    font-weight: 500;
    max-width: min(84%, 440px);
    text-align: center;
    white-space: normal;
    line-height: 1.45;
}
body.chat-app-open .chat-recalled-msg span {
    max-width: min(84%, 440px);
    text-align: center;
    line-height: 1.45;
}
body.chat-app-open .chat-profile-desc {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.92;
    line-height: 1.4;
}
body.chat-app-open .chat-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
    border-radius: var(--blora-radius-sm);
}
body.chat-app-open .chat-member-row:hover {
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-member-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}
body.chat-app-open .chat-join-wall {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
}
body.chat-app-open .chat-join-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
body.chat-app-open .chat-manage {
    padding: 4px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.chat-app-open .chat-manage-title {
    margin: 8px 0 0;
    font-size: 14px;
}
body.chat-app-open .chat-manage .select,
body.chat-app-open .chat-manage .blora-input {
    width: 100%;
}
body.chat-app-open .chat-member-main small {
    display: block;
    color: var(--blora-color-text-muted);
    font-size: 12px;
}
body.chat-app-open .chat-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--blora-radius-sm);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
}
body.chat-app-open .chat-profile-row:hover {
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-profile-ico {
    width: 28px;
    text-align: center;
    font-size: 16px;
}
body.chat-app-open .chat-profile-row small {
    display: block;
    color: var(--blora-color-text-muted);
    font-size: 12px;
}
body.chat-app-open .chat-profile-tabs {
    display: flex;
    gap: 4px;
    padding: 4px 12px 8px;
}
body.chat-app-open .chat-profile-tabs button {
    border: none;
    background: var(--blora-color-surface-raised);
    color: var(--blora-color-text-muted);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--blora-text-sm);
}
body.chat-app-open .chat-profile-tabs button.active {
    background: color-mix(in srgb, var(--blora-color-action-primary-default) 14%, transparent);
    color: var(--blora-color-action-primary-default);
    font-weight: 650;
}
body.chat-app-open #chat-profile-body {
    animation: chat-profile-content-in 180ms ease both;
}
@keyframes chat-profile-content-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
body.chat-app-open .chat-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 0 2px 12px;
    overflow-y: auto;
    flex: 1;
}
body.chat-app-open .chat-profile-grid img,
body.chat-app-open .chat-profile-grid a {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--blora-color-surface-raised);
    display: block;
}
body.chat-app-open .chat-profile-link {
    padding: 10px 14px;
    border-bottom: 1px solid var(--blora-color-border-subtle);
    text-decoration: none;
    color: inherit;
    display: block;
}
body.chat-app-open .chat-profile-link strong { display: block; font-size: 13px; }
body.chat-app-open .chat-profile-link span {
    font-size: 12px;
    color: var(--blora-color-text-muted);
}

.chat-drawer-backdrop,
.chat-menu-pop { z-index: 2400; }
.chat-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: var(--modal-bg, var(--blora-color-surface-default, #fff));
    z-index: 2401;
    box-shadow: var(--blora-shadow-1);
    display: flex;
    flex-direction: column;
    padding: 18px 8px 16px;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
}
.chat-drawer.open { transform: none; }
.chat-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 16px;
}
.chat-drawer-user img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.chat-drawer .blora-button {
    width: 100%;
    justify-content: flex-start;
}
.chat-drawer button,
.chat-menu-pop button {
    display: flex;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 11px 14px;
    border-radius: var(--blora-radius-sm, 8px);
    cursor: pointer;
    color: inherit;
    font-size: 15px;
    gap: 10px;
    align-items: center;
}
.chat-drawer button:hover,
.chat-menu-pop button:hover {
    background: var(--blora-color-surface-raised, var(--primary-bg-light));
}
.chat-menu-pop {
    position: fixed;
    min-width: 200px;
    background: var(--modal-bg, #fff);
    border: 1px solid var(--blora-color-border-subtle, var(--border-primary));
    border-radius: var(--blora-radius-lg, 13px);
    box-shadow: var(--blora-shadow-1);
    padding: 6px;
}
.chat-attach-menu {
    position: absolute;
    left: 12px;
    bottom: 58px;
    background: var(--modal-bg, #fff);
    border: 1px solid var(--blora-color-border-subtle, var(--border-primary));
    border-radius: var(--blora-radius-lg, 13px);
    box-shadow: var(--blora-shadow-1);
    padding: 6px;
    z-index: 20;
    min-width: 160px;
}
.chat-search-hit {
    background: color-mix(in srgb, var(--blora-color-action-primary-default) 18%, transparent);
}

.chat-thread-search {
    display: none;
    padding: 6px 12px 8px;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-default);
}
.chat-thread-search.open { display: flex; }
.chat-thread-search input {
    flex: 1;
    border: 1px solid var(--blora-color-border-subtle);
    background: var(--blora-color-surface-raised);
    border-radius: var(--blora-radius-lg);
    padding: 8px 12px;
    color: inherit;
}

@media (max-width: 1400px) {
    body.chat-app-open .chat-layout.profile-open .chat-profile {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 92vw);
        z-index: 12;
        box-shadow: var(--blora-shadow-1);
    }
}

@media (max-width: 768px) {
    body.chat-app-open .menu-toggle { display: none !important; }
    body.chat-app-open .chat-layout {
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
            calc(env(safe-area-inset-bottom, 0px) + var(--chat-vv-offset, 0px)) env(safe-area-inset-left, 0px);
        gap: 0;
        border-top: none;
    }
    body.chat-app-open .chat-sidebar,
    body.chat-app-open .chat-main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
    }
    body.chat-app-open .chat-layout:not(.chat-mode-thread) .chat-sidebar,
    body.chat-app-open .chat-layout.chat-mode-thread .chat-main {
        display: flex;
    }
    body.chat-app-open .chat-layout:not(.chat-mode-thread) .chat-main,
    body.chat-app-open .chat-layout.chat-mode-thread .chat-sidebar {
        display: none;
    }
    body.chat-app-open [data-action="chat-back"] { display: inline-flex; }
    body.chat-app-open .chat-sidebar-header,
    body.chat-app-open .chat-thread-header {
        padding: 8px;
    }
    body.chat-app-open .chat-thread-header-left { gap: 6px; }
    body.chat-app-open .chat-sidebar-header .blora-button,
    body.chat-app-open .chat-thread-header .blora-button,
    body.chat-app-open .chat-composer > .blora-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
    }
    body.chat-app-open .chat-search-pill { min-width: 0; min-height: 44px; }
    body.chat-app-open #chat-rooms-search,
    body.chat-app-open #chat-input { font-size: 16px; }
    body.chat-app-open .chat-composer-wrap { padding-bottom: 0; }
    body.chat-app-open .chat-composer {
        padding: 8px;
        gap: 4px;
    }
    body.chat-app-open #chat-input {
        min-height: 44px;
        max-height: min(120px, 25dvh);
    }
    body.chat-app-open .chat-bubble-wrap { max-width: min(100%, 420px); }
    body.chat-app-open .chat-sidebar,
    body.chat-app-open .chat-main,
    body.chat-app-open .chat-profile {
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    body.chat-app-open .chat-layout.profile-open .chat-profile {
        position: fixed;
        inset: 0;
        width: 100%;
        z-index: 30;
        display: flex;
        border-radius: 0;
    }
    body.chat-app-open .chat-compose-fab {
        right: 14px;
        bottom: 18px;
    }
}

body.chat-app-open .chat-ctx-emoji-more {
    background: var(--blora-color-surface-raised);
    color: var(--blora-color-text-muted);
    font-size: 20px;
    line-height: 1;
}
.chat-emoji-picker {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    padding: 16px;
}
.chat-emoji-picker-panel {
    width: min(380px, 100%);
    height: min(460px, calc(100vh - 32px));
    display: flex;
    flex-direction: column;
    background: var(--blora-color-surface-default, #fff);
    color: var(--blora-color-text-primary);
    border-radius: var(--blora-radius-lg, 16px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.chat-emoji-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--blora-color-border-subtle, var(--border-primary));
}
.chat-emoji-picker-head .blora-input {
    flex: 1;
    min-width: 0;
}
.chat-emoji-picker-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    overflow-x: auto;
    border-bottom: 1px solid var(--blora-color-border-subtle, var(--border-primary));
    scrollbar-width: none;
}
.chat-emoji-picker-tab {
    flex: none;
    border: none;
    background: transparent;
    color: var(--blora-color-text-muted);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.chat-emoji-picker-tab.active {
    background: var(--blora-color-surface-raised, var(--bg-secondary));
    color: var(--blora-color-text-primary);
    font-weight: 600;
}
.chat-emoji-picker-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px 16px;
}
.chat-emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
}
.chat-emoji-picker-item {
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    min-height: 36px;
    cursor: pointer;
}
.chat-emoji-picker-item:hover {
    background: var(--blora-color-surface-raised, var(--bg-secondary));
}
body.chat-app-open .emoji-picker-overlay {
    z-index: 2100;
}
body.chat-app-open .emoji-picker-container {
    z-index: 2101;
}
body.chat-app-open .chat-forward-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-forward-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
body.chat-app-open .chat-forward-bundle {
    display: block;
    width: min(248px, 100%);
    text-align: left;
    padding: 10px 12px 8px 14px;
    border: 0;
    border-radius: 14px;
    background: var(--blora-color-surface-default);
    color: var(--blora-color-text-primary);
    box-shadow: 0 0 0 1px var(--blora-color-border-subtle);
    cursor: pointer;
    position: relative;
}
body.chat-app-open .chat-forward-bundle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--blora-color-action-primary-default, #3e6c70);
}
body.chat-app-open .chat-forward-bundle:hover {
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .blora-chat--end .chat-forward-bundle {
    background: var(--blora-color-surface-default);
    color: var(--blora-color-text-primary);
}
body.chat-app-open .blora-chat--end .chat-forward-bundle:hover {
    background: var(--blora-color-surface-raised);
}
body.chat-app-open .chat-forward-bundle-kicker {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--blora-color-action-primary-default, #3e6c70);
    margin-bottom: 4px;
}
body.chat-app-open .chat-forward-bundle-kicker .sf-icon {
    width: 12px;
    height: 12px;
}
body.chat-app-open .chat-bubble-wrap:has(.chat-forward-bundle) .chat-time,
body.chat-app-open .chat-forward-bundle .chat-time {
    color: var(--blora-color-text-subtle);
    opacity: 0.8;
}
body.chat-app-open .chat-forward-bundle-title {
    font-weight: 650;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 8px;
}
body.chat-app-open .chat-forward-bundle-row {
    display: flex;
    gap: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--blora-color-text-muted);
    min-width: 0;
}
body.chat-app-open .chat-forward-bundle-row + .chat-forward-bundle-row {
    margin-top: 3px;
}
body.chat-app-open .chat-forward-bundle-row b {
    flex: none;
    max-width: 42%;
    color: var(--blora-color-text-emphasis, var(--blora-color-text-primary));
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chat-app-open .chat-forward-bundle-row b::after {
    content: '：';
    font-weight: 500;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-forward-bundle-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chat-app-open .chat-forward-bundle-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--blora-color-border-subtle);
    font-size: 11px;
    color: var(--blora-color-text-subtle);
}
body.chat-app-open .chat-forward-bundle-foot .chat-time-row {
    float: none;
    width: auto;
    margin: 0;
}
body.chat-app-open .chat-forward-bundle-foot .sf-icon {
    width: 10px;
    height: 10px;
    opacity: 0.55;
    flex: none;
}

body.chat-app-open .chat-forward-record {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--blora-color-surface-canvas);
}
body.chat-app-open .chat-forward-record-head {
    display: flex;
    align-items: center;
    gap: var(--blora-space-3);
    padding: var(--blora-space-3) var(--blora-space-4);
    background: var(--blora-color-surface-default);
    border-bottom: 1px solid var(--blora-color-border-subtle);
    flex: none;
}
body.chat-app-open .chat-forward-record-head-text {
    min-width: 0;
}
body.chat-app-open .chat-forward-record-head strong {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chat-app-open .chat-forward-record-head-text span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--blora-color-text-muted);
}
body.chat-app-open .chat-forward-record-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
body.chat-app-open .chat-forward-record-end {
    text-align: center;
    font-size: 12px;
    color: var(--blora-color-text-subtle);
    padding: 16px 8px 24px;
}