/* ========================================
   分享對話頁面樣式
   依賴：core/tokens.css, components/_cards.css, components/chat/_chat-base.css
   ======================================== */

/* 頁面容器：擴展 je-card */
.je-share-page {
    max-width: var(--je-container-wide); /* 原 900px */
    margin: 0 auto;
    box-shadow: var(--je-shadow-xl);
    border-radius: var(--je-radius-xl);
    overflow: hidden;
    /* 使用 max-height 限制，訊息區佔剩餘空間 */
    max-height: calc(100vh - var(--je-space-12)); /* 原 48px */
    display: flex;
    flex-direction: column;
}

/* ========================================
   頭部：Agent 資訊
   ======================================== */
.je-share-agent-header {
    display: flex;
    align-items: center;
    gap: var(--je-space-4);
    background: var(--je-primary);
    padding: var(--je-space-5) var(--je-space-6);
    border-bottom: none;
    flex-shrink: 0;
}

/* 頭像：擴展 je-chat-window-avatar */
.je-share-avatar {
    width: var(--je-avatar-lg); /* 原 64px */
    height: var(--je-avatar-lg); /* 原 64px */
    font-size: var(--je-text-xl);
    border: var(--je-border-width-thick) solid var(--je-white-alpha-30); /* 原 3px */
    border-radius: var(--je-radius-full);
    flex-shrink: 0;
    overflow: hidden;
}

.je-share-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--je-radius-full);
}

.je-share-avatar .avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--je-white-alpha-20);
    color: var(--je-white);
    font-weight: var(--je-font-bold);
}

/* Agent 資訊 */
.je-share-agent-info {
    flex: 1;
    min-width: 0;
}

.je-share-agent-name {
    font-size: var(--je-text-xl);
    font-weight: var(--je-font-bold);
    color: var(--je-white);
    margin: 0 0 var(--je-space-1);
}

.je-share-agent-desc {
    font-size: var(--je-text-sm);
    color: var(--je-white-alpha-85);
    margin: 0 0 var(--je-space-3);
    line-height: 1.4;
}

/* 徽章區域 */
.je-share-badges {
    display: flex;
    align-items: center;
    gap: var(--je-space-3);
    flex-wrap: wrap;
}

/* 覆蓋徽章樣式（白色背景上） */
.je-share-agent-header .je-status-badge {
    background: var(--je-white-alpha-15);
    color: var(--je-white);
}

.je-share-agent-header .je-status-badge i {
    color: inherit;
}

/* Thread ID */
.je-share-thread-id {
    display: inline-flex;
    align-items: center;
    gap: var(--je-space-1);
    font-size: var(--je-text-xs);
    color: var(--je-white-alpha-70);
}

.je-share-thread-id code {
    background: var(--je-white-alpha-15);
    padding: var(--je-space-0-5) var(--je-space-1-5); /* 原 2px 6px */
    border-radius: var(--je-radius-sm);
    font-family: var(--je-font-mono);
    color: var(--je-white-alpha-80);
}

/* ========================================
   訊息區域
   ======================================== */
.je-share-messages {
    padding: var(--je-space-5);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--je-space-4);
}

/* 調整訊息最大寬度 */
.je-share-messages .je-chat-message {
    max-width: 85%;
}

/* Bot 頭像使用主色 */
.je-share-messages .je-chat-message.bot .je-chat-message-avatar {
    background: var(--je-primary);
    color: var(--je-white);
    width: var(--je-space-8); /* 原 32px */
    height: var(--je-space-8); /* 原 32px */
    border-radius: var(--je-radius-full);
    overflow: hidden;
}

.je-share-messages .je-chat-message.bot .je-chat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--je-radius-full);
}

.je-share-messages .je-chat-message.bot .je-chat-message-avatar span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--je-text-xs);
    font-weight: var(--je-font-medium);
}

/* 訊息內圖片 */
.je-share-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--je-space-2);
    margin-bottom: var(--je-space-2);
}

.je-share-image-item {
    display: block;
    max-width: var(--je-image-preview-width); /* 原 180px */
    border-radius: var(--je-radius-md);
    overflow: hidden;
}

.je-share-image-item img {
    display: block;
    width: 100%;
    height: auto;
}

.je-chat-message.user .je-share-images {
    justify-content: flex-end;
}

/* ========================================
   底部
   ======================================== */
.je-share-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--je-space-3);
    padding: var(--je-space-4) var(--je-space-5);
    background: var(--je-bg-secondary);
    flex-shrink: 0;
}

.je-share-notice {
    display: flex;
    align-items: center;
    gap: var(--je-space-2);
    font-size: var(--je-text-sm);
    color: var(--je-text-secondary);
}

.je-share-notice i {
    color: var(--je-info);
}

.je-share-meta-footer {
    display: flex;
    gap: var(--je-space-4);
    font-size: var(--je-text-xs);
    color: var(--je-text-muted);
}

.je-share-meta-footer span {
    display: inline-flex;
    align-items: center;
    gap: var(--je-space-1);
}

/* ========================================
   響應式
   ======================================== */
@media (max-width: 768px) { /* --je-breakpoint-md: 768px */
    .je-share-page {
        margin: var(--je-space-3);
        border-radius: var(--je-radius-lg);
        max-height: calc(100vh - var(--je-space-10)); /* 原 40px */
    }

    .je-share-agent-header {
        flex-direction: column;
        text-align: center;
        padding: var(--je-space-4);
    }

    .je-share-avatar {
        width: var(--je-avatar-xlg); /* 原 56px */
        height: var(--je-avatar-xlg); /* 原 56px */
    }

    .je-share-badges {
        justify-content: center;
    }

    .je-share-messages {
        padding: var(--je-space-4);
    }

    .je-share-messages .je-chat-message {
        max-width: 92%;
    }

    .je-share-footer {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   列印
   ======================================== */
@media print {
    .je-share-page {
        box-shadow: none;
    }

    .je-share-agent-header {
        background: var(--je-bg-tertiary) !important;
        -webkit-print-color-adjust: exact;
    }

    .je-share-agent-header,
    .je-share-agent-header * {
        color: var(--je-text-primary) !important;
    }

    .je-share-messages {
        flex: none;
        overflow: visible;
    }
}