/* ==========================================================================
   Artifact Surface —— 聊天内生成物 / 上传文件的统一渲染层
   批一（2026-09-18）：刀A 工具调用降级 · 刀B 统一卡片 · 刀C Preview Surface + 图片 Viewer
   设计口径来自《AZOTH Artifact / 演练沙箱渲染与转发重构 · 需求与交互设计 v0.1》：
     结果优先 / 先看再管理 / 同类对象同一种长相 / 打开后才给高级操作
   审美红线：不用彩色左边条卡片；不用系统默认灰块；一张卡只留一个主动作。
   ========================================================================== */

/* ── 压制旧骨架 ────────────────────────────────────────────────────────────
   新卡根节点刻意保留 .artifact-card / .sc-file（既有 downloadArtifact、
   saveArtifactToLibrary、updateFileCardStatus 都靠这两个选择器 closest/querySelector
   定位，保留就一行都不用改它们）。但旧样式的 grid + 渐变灰底必须让位。
   用 (0,2,0) 压过 chat.css / style.css 的 (0,1,0)，不依赖样式表先后顺序。 */
.artifact-card.as-card,
.sc-file.as-card {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    gap: 0;
    padding: 0;
    box-shadow: none;
}

.artifact-card.as-card:hover,
.sc-file.as-card:hover {
    box-shadow: none;
}

/* 图片是"消息里的主内容块"，外壳只是 data-artifact-* 的载体，零装饰 */
.artifact-card.as-card--bare,
.artifact-card.as-card--bare:hover {
    border: none;
    background: none;
    margin: 0;
    overflow: visible;
}

/* ── 通用底座 ──────────────────────────────────────────────────────────── */
.as-card {
    margin: 6px 0;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    background: rgba(var(--accent-rgb), 0.045);
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s;
}

.as-card:hover {
    border-color: rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--accent-rgb), 0.07);
}

/* 整卡即"打开"——主动作只有一个，其余进 ⋯ */
.as-card--tappable {
    cursor: pointer;
}

/* 薄信息条：左缩略/图标 · 中标题+元信息 · 右 ⋯ */
.as-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-width: 0;
}

.as-bar-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(var(--accent-rgb), 0.13);
    color: var(--accent);
    overflow: hidden;
}

.as-bar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 图标一律线性 SVG（不用 emoji：各端字形不一，彩色位图跟单色线稿放一起掉价） */
.as-bar-thumb svg {
    display: block;
    opacity: 0.82;
}

.as-toolline-dot svg {
    display: block;
}

.as-vact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 21px;
}

.as-bar-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 干净的人类标题：不放 40 字 prompt，不放时间戳 */
.as-title {
    font-size: 0.83rem;
    font-weight: 650;
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* 元信息走等宽小字，弱化"文件"属性 */
.as-meta {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--text);
    opacity: 0.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 来源标记保持轻量：需要追溯时看得见，不打断阅读 */
.as-src {
    opacity: 0.42;
    font-style: normal;
}

.as-more {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--text);
    opacity: 0.45;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.15s, background 0.15s;
}

.as-more:hover {
    opacity: 0.85;
    background: rgba(var(--accent-rgb), 0.12);
}

/* ── 图片：连卡壳都不要，直接铺在聊天里 ────────────────────────────────── */
.as-image {
    display: block;
    margin: 6px 0;
    max-width: 100%;
    max-height: 420px;
    border-radius: 14px;
    cursor: zoom-in;
    object-fit: contain;
    background: rgba(var(--accent-rgb), 0.05);
}

/* ── 网页 / HTML：上半首屏预览，下半信息条 ─────────────────────────────── */
.as-shot {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.as-shot iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 0;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    background: #fff;
}

/* 文本首屏预览（markdown / 纯文本）：给几行真内容，不给空壳 */
.as-shot--text {
    height: auto;
    max-height: 132px;
    padding: 12px 14px 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text);
    opacity: 0.62;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* ── 刀A：工具调用降级成一条轻状态线 ──────────────────────────────────── */
.as-toolline {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 2px;
    margin: 2px 0;
    font-size: 0.72rem;
    color: var(--text);
    opacity: 0.55;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.as-toolline:hover {
    opacity: 0.8;
}

.as-toolline-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    display: inline-block;
}

/* 生成中：细环转圈，不是大灰条 */
.as-toolline--running .as-toolline-dot {
    border: 1.5px solid rgba(var(--accent-rgb), 0.28);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: as-spin 0.75s linear infinite;
}

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

.as-toolline--done .as-toolline-dot,
.as-toolline--error .as-toolline-dot {
    text-align: center;
    line-height: 11px;
    font-size: 0.72rem;
}

.as-toolline--error {
    opacity: 0.75;
}

.as-toolline-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-toolline-arrow {
    opacity: 0.55;
    font-size: 0.66rem;
    transition: transform 0.18s;
}

.as-toolline.as-open .as-toolline-arrow {
    transform: rotate(90deg);
}

/* 失败时的重试：状态线右侧唯一按钮 */
.as-toolline-retry {
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: transparent;
    color: var(--accent);
    border-radius: 7px;
    font-size: 0.66rem;
    padding: 1px 8px;
    cursor: pointer;
    touch-action: manipulation;
}

/* 过程详情：默认收起，点状态线才展开 */
.as-toolbody {
    display: none;
    margin: 2px 0 6px;
    padding-left: 18px;
}

.as-toolbody.as-open {
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   层级阶梯（2026-09-21 真机验收后重定，**现读全仓得出，不是拍脑袋**）

     100002 / 100001  azoth-dialog      ← 确认框必须永远在最上，别越过它
     100000           avatar-library
      99999           chat toast
   →  16300           .as-menu          卡片 ⋯ 菜单（可从下面任何一层弹出）
   →  16200           .as-picker        窗口选择器（可从沙箱里弹出）
   →  16100           .as-viewer        图片沉浸式查看
   →  16000           .as-surface       Preview Surface
      15800 / 15700   project-center
      15020 / 15010 / 15000  canvas（沙箱 picker / editor / drawer）
      ~10000          聊天界面各层

   🔴 原来这一层是 11000 / 12600 / 12800，**整个压在沙箱 15000 之下**：
      从沙箱里点"发送到其他窗口"，选择器确实弹出来了，但在沙箱底下——
      塔拉看到的是"必须先关掉沙箱才看得见"（第 6 条）。
      改层级前先 grep 全仓现读天花板，别只跟自己这一层比。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 刀C：独立 Preview Surface（替代白底小弹窗） ────────────────────────── */
.as-surface {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    color: var(--text);
    animation: as-surface-in 0.2s ease-out;
}

@keyframes as-surface-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.as-surface-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}

.as-sbtn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: none;
    background: transparent;
    color: var(--text);
    opacity: 0.7;
    font-size: 1.15rem;
    line-height: 1;
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.15s, background 0.15s;
}

.as-sbtn:hover {
    opacity: 1;
    background: rgba(var(--accent-rgb), 0.12);
}

.as-surface-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 650;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-surface-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.as-surface-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.as-surface-body pre {
    margin: 0;
    padding: 16px;
    font-size: 0.76rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.as-surface-md {
    padding: 18px 16px 48px;
    max-width: 760px;
    margin: 0 auto;
}

.as-surface-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 16px;
}

.as-surface-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* 右上 ⋮ 菜单：按 artifact 类型出条目，不是万能菜单 */
.as-menu {
    position: absolute;
    top: calc(52px + env(safe-area-inset-top, 0px));
    right: 10px;
    min-width: 168px;
    /* 🔴 原来是 5。它在 .as-surface 内部当子元素时够用，但卡片上的 ⋯ 是把菜单
       挂到 document.body 的 —— 在根层 z-index:5 等于被整个聊天界面盖住：
       菜单其实弹出来了，塔拉看到的是"点不开"（第 2 条）。
       同一个类被用在两种挂载点上，就得按更严苛的那个定层级。 */
    z-index: 16300;
    border-radius: 14px;
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
    animation: as-menu-in 0.14s ease-out;
}

@keyframes as-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.as-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    text-align: left;
    border-radius: 9px;
    cursor: pointer;
    touch-action: manipulation;
    text-decoration: none;
}

.as-menu-item:hover {
    background: rgba(var(--accent-rgb), 0.12);
}

.as-menu-item[aria-checked="true"]::after {
    content: '✓';
    margin-left: auto;
    color: var(--accent);
    font-size: 0.78rem;
}

.as-menu-sep {
    height: 1px;
    margin: 5px 8px;
    background: rgba(var(--accent-rgb), 0.14);
}

.as-menu-item--danger {
    color: #c0564f;
}

/* ── 刀C：图片沉浸式 Viewer ────────────────────────────────────────────── */
.as-viewer {
    position: fixed;
    inset: 0;
    z-index: 16100;
    background: #000;
    overflow: hidden;
    touch-action: none;
}

.as-viewer-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* 上下栏默认隐身；单击屏幕才淡入 */
.as-viewer-top,
.as-viewer-bottom {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    z-index: 2;
}

.as-viewer-top {
    top: 0;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
    transform: translateY(-8px);
}

.as-viewer-bottom {
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
    transform: translateY(8px);
    justify-content: space-around;
}

.as-viewer.as-chrome .as-viewer-top,
.as-viewer.as-chrome .as-viewer-bottom {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.as-viewer-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-vbtn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
}

.as-vbtn:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* 底部动作：图标 + 小字，一排四个 */
.as-vact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.64rem;
    padding: 4px 10px;
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
}

.as-vact:hover {
    background: rgba(255, 255, 255, 0.14);
}

.as-vact-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.as-vact:disabled {
    opacity: 0.38;
    cursor: default;
}

/* 提示词 chip：默认折叠，不让 prompt 污染看图体验 */
.as-prompt-chip {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.68rem;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
}

.as-prompt-panel {
    position: absolute;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    max-height: 46vh;
    overflow: auto;
    z-index: 3;
    display: none;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(20, 20, 20, 0.94);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.76rem;
    line-height: 1.65;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.as-prompt-panel.as-open {
    display: block;
}

.as-prompt-panel dt {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 10px;
}

.as-prompt-panel dt:first-child {
    margin-top: 0;
}

.as-prompt-panel dd {
    margin: 2px 0 0;
    word-break: break-word;
}

/* ── 批二：来源回跳（转发进来的卡片底部那行小字） ──────────────────────── */
.as-from {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text);
    opacity: 0.45;
    font: inherit;
    font-size: 0.66rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    touch-action: manipulation;
}

.as-from:hover {
    opacity: 0.8;
}

/* ── 批二：窗口选择器 ─────────────────────────────────────────────────── */
.as-picker {
    position: fixed;
    inset: 0;
    z-index: 16200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.as-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.as-picker-card {
    position: relative;
    width: min(100%, 460px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
    animation: as-picker-in 0.22s ease-out;
}

@keyframes as-picker-in {
    from { transform: translateY(18px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (min-width: 640px) {
    .as-picker { align-items: center; }
    .as-picker-card { border-radius: 18px; }
}

.as-picker-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.as-picker-title {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-picker-here {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--text);
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.as-picker-hint {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.55;
}

.as-picker-search,
.as-picker-note {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.05);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    resize: none;
}

.as-picker-list {
    flex: 1;
    min-height: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.as-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 11px;
    cursor: pointer;
}

.as-picker-row:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.as-picker-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.as-picker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.as-picker-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.as-picker-name {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-picker-sub {
    font-size: 0.68rem;
    opacity: 0.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-picker-empty {
    padding: 22px 0;
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.45;
}

.as-picker-go {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: var(--card-bg);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    touch-action: manipulation;
}

.as-picker-go:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── 刀E：输入框上方的待发文件托盘（视觉信号发文件先预览、可叉掉） ────────
   容器复用 .composer-image-tray（同一条边框节奏），只补文件 chip 自己的长相。 */
.composer-file-tray {
    flex-wrap: wrap;
}

.cfile-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 6px 6px 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.07);
    font-size: 0.74rem;
    color: var(--text);
}

.cfile-name {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfile-size {
    opacity: 0.5;
    font-size: 0.68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    flex: 0 0 auto;
}

.cfile-del {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    line-height: 17px;
    text-align: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--text);
    opacity: 0.62;
    font-size: 0.8rem;
    cursor: pointer;
    touch-action: manipulation;
}

.cfile-del:hover {
    opacity: 1;
    background: rgba(var(--accent-rgb), 0.28);
}

/* ── 刀D：演练沙箱底栏收拢后的 ⋯ 菜单锚点 ─────────────────────────────── */
.as-anchor {
    position: relative;
}

/* ── 窄屏 ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .as-shot {
        height: 160px;
    }

    .as-image {
        max-height: 340px;
    }

    .as-menu {
        left: 10px;
        right: 10px;
        min-width: 0;
    }
}