/* ============================================================
   分享对话:选择模式 / 底部浮动栏 / 图片预览 / 离屏长图卡片
   ============================================================ */

/* 选择模式:为勾选圈留出左侧落点,并隐藏输入区(底部栏接管)。 */
.chat-messages.share-mode,
.chat-messages.delete-mode { padding-bottom: 96px; }
body.share-mode-active .chat-input-area,
body.delete-mode-active .chat-input-area { display: none; }
body.share-mode-active .scroll-to-bottom-btn,
body.delete-mode-active .scroll-to-bottom-btn { display: none; }

/* 单条消息(用户提问 / AI 回复)的可勾选包裹。
   用 flex 列 + 按角色 align,让消息保持对话原样:用户提问靠右、AI 回复靠左。 */
.share-msg-wrap {
    position: relative;
    /* 包裹本身占满整行(与普通消息同宽),内部再按角色把消息推到左/右 */
    width: 100%;
    max-width: var(--content-max);
    padding: 10px 12px 10px 48px;
    margin: 0 -12px 4px;
    border-radius: var(--radius-lg);
    border: 1.5px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease);
}
.share-msg-wrap.is-user { align-items: flex-end; }
.share-msg-wrap > .message { max-width: 100%; }
.share-msg-wrap:hover { background: var(--color-surface-hover); }
.share-msg-wrap.is-selected {
    background: var(--color-primary-soft);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
/* 勾选圈:左侧竖直居中 */
.share-check {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease);
}
.share-check svg { width: 14px; height: 14px; }
.share-msg-wrap.is-selected .share-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
/* 选择模式下,消息自身的外边距交给包裹接管,操作条隐藏 */
.share-msg-wrap .message { margin-bottom: 0; }
.share-msg-wrap .message-actions { display: none; }

/* 底部浮动操作栏 */
.share-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 24px rgba(15, 15, 25, 0.06);
    transform: translateY(100%);
    transition: transform var(--duration-base) var(--ease);
}
.share-action-bar.visible { transform: translateY(0); }
.share-bar-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.share-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--color-text);
    user-select: none;
}
.share-selectall input { position: absolute; opacity: 0; width: 0; height: 0; }
.share-checkbox-ui {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--color-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease);
    position: relative;
}
.share-selectall input:checked + .share-checkbox-ui,
.share-selectall input:indeterminate + .share-checkbox-ui {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.share-selectall input:checked + .share-checkbox-ui::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.share-selectall input:indeterminate + .share-checkbox-ui::after {
    content: "";
    width: 9px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}
.share-count {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}
.share-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-bar-actions .btn {
    padding: 9px 20px;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}
.share-bar-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.share-bar-actions .btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}
.share-bar-actions .btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
.share-bar-actions .btn-light {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.share-bar-actions .btn-light:hover:not(:disabled) { background: var(--color-border-strong); }
.share-bar-actions .btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.share-bar-actions .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.share-bar-actions .btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.share-bar-actions .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-danger) 86%, #000); }

/* 图片预览弹窗 */
.share-preview-modal {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}
.share-preview-body {
    overflow-y: auto;
    background: var(--color-bg);
    padding: 18px;
    margin: 0;
}
.share-preview-stage {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-preview-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: block;
}
.share-preview-loading {
    color: var(--color-text-tertiary);
    font-size: 0.9rem;
    padding: 40px 12px;
    text-align: center;
}

/* 离屏长图合成容器:固定在屏幕外,供 html2canvas 截取 */
#shareCardHolder {
    position: fixed;
    left: -99999px;
    top: 0;
    z-index: -1;
    pointer-events: none;
}
.share-img-root {
    width: 720px;
    padding: 40px;
    /* 兜底纯色渐变;实际主题色 tint 由 JS 内联(html2canvas 不支持 color-mix)。 */
    background: linear-gradient(180deg, #eef1fb 0%, #f3f4f8 220px, #f3f4f8 100%);
}
.share-img-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 44px 48px;
    box-shadow: 0 10px 40px rgba(15, 15, 25, 0.08);
    color: #1a1a1f;
}
.share-img-title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1f;
}
.share-img-meta {
    font-size: 13px;
    color: #9a9aa6;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.share-img-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: inline-block; }
.share-img-divider { height: 1px; background: #ececef; border: 0; margin: 24px 0 4px; }
.share-img-q-row { display: flex; justify-content: flex-end; margin: 24px 0 18px; }
.share-img-q {
    max-width: 88%;
    background: #f0f0f3;
    color: #1a1a1f;
    padding: 12px 16px;
    border-radius: 16px 16px 4px 16px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.share-img-a.share-img-a { /* 提高特异性,把回复气泡底色覆盖为文档风 */
    background: transparent;
    border: 0;
    padding: 0;
    color: #1a1a1f;
    font-size: 15px;
    line-height: 1.75;
}

@media (max-width: 640px) {
    .share-bar-inner { padding: 12px 14px; gap: 10px; }
    .share-selectall span:last-child { display: none; }   /* 窄屏只留勾选框 */
    .share-bar-actions { gap: 8px; }
    .share-bar-actions .btn { padding: 9px 14px; }
    .share-msg-wrap { padding-left: 42px; }
    .share-check { left: 10px; }
}