/**
 * widget-orb-mode：極光暗夜 orb 介面的單一視覺真相來源。
 *
 * 後台 preview（React OrbShell）與嵌入端 loader（public/widget.js）共用本檔——
 * 靜態檔、不經 Vite 編譯（loader 需要穩定 URL），由 app.blade.php <link> 與
 * loader 注入的 <link> 各自載入。
 *
 * 設計定案（design.md D3）：--orb-* 為固定值，MUST NOT 隨六套後台主題切換。
 */

/* --orb-* 變數定義在 :root（後台預覽 / app 文件）與 :host（嵌入端 shadow root）
   兩處：嵌入端 chrome 封裝於 shadow 內，:root 選擇器在 shadow tree 不命中，需以
   :host 設於 shadow host 才能向下繼承。app 文件中 :host 不命中、無副作用。 */
:root,
:host {
    --orb-blur: 24px;
    --orb-surface-0: rgba(13, 16, 28, 0.66);
    --orb-surface-1: rgba(22, 27, 45, 0.78);
    --orb-surface-2: rgba(30, 36, 58, 0.92);
    /* 實心底色層：墊在半透明 surface 後方，使 backdrop-filter 模糊的是此已知底色
       而非宿主頁面（避免 light/dark 被宿主背景透色染色）。orb_input 採用。 */
    --orb-solid-base: #0d101c;
    --orb-text-primary: rgba(245, 247, 255, 0.96);
    --orb-text-secondary: rgba(196, 203, 230, 0.72);
    --orb-aurora-a: #22d3ee;
    --orb-aurora-b: #8b5cf6;
    --orb-aurora-c: #f472b6;
    --orb-edge: rgba(255, 255, 255, 0.22);
    --orb-hairline: rgba(255, 255, 255, 0.1);
    --orb-input-bg: rgba(13, 16, 28, 0.55);
    --orb-scrollbar: rgba(255, 255, 255, 0.25);
    /* 水晶光澤（不影響色彩配置——皆為中性白/黑高光層，疊在極光色之上）。
       暗夜底：玻璃在深色上的反光是清脆高對比的亮白點。 */
    --orb-gloss-glint: rgba(255, 255, 255, 0.85); /* 角落銳利反光點 */
    --orb-gloss-top: rgba(255, 255, 255, 0.45); /* 頂部弧形光帶 */
    --orb-gloss-caustic: rgba(255, 255, 255, 0.18); /* 底部折射 caustic */
    --orb-gloss-rim-top: rgba(255, 255, 255, 0.5); /* 內緣頂部亮邊 */
    --orb-gloss-rim-bottom: rgba(0, 0, 0, 0.32); /* 內緣底部陰影=玻璃厚度 */
    /* 狀態色（D3：執行中紫 / 完成青 / 失敗粉）——語義色，不隨商家極光色 */
    --orb-status-running-bg: rgba(139, 92, 246, 0.25);
    --orb-status-running-text: #c4b5fd;
    --orb-status-done-bg: rgba(34, 211, 238, 0.18);
    --orb-status-done-text: #67e8f9;
    --orb-status-failed-bg: rgba(244, 114, 182, 0.22);
    --orb-status-failed-text: #f9a8d4;
    /* simplify-orb-input-chat：對齊設計系統 radius 語彙（純 CSS 自帶一份，
       嵌入端讀不到 app.css :root）。orb_input 清爽面板採用；圓球沿用原值。 */
    --orb-radius-card: 14px;
    --orb-radius-input: 10px;
    --orb-radius-chip: 999px;
    --orb-radius-small: 6px;
}

/* ===== Shadow DOM 封裝基線（嵌入端 orb chrome 專用） =====
   嵌入端 loader 把 chrome 掛進 shadow root 內的 .orb-root；shadow boundary 阻斷
   宿主選擇器，但繼承屬性（font-family / font-size / line-height / color…）仍會經
   shadow host 滲入，於 .orb-root 設定明確基線阻斷之；box-sizing 非繼承，需於後代
   逐一宣告。後台預覽非 shadow（無 .orb-root），下列規則不命中、不受影響。 */
.orb-root {
    box-sizing: border-box;
    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: start;
    text-transform: none;
    color: var(--orb-text-primary);
}

.orb-root *,
.orb-root *::before,
.orb-root *::after {
    box-sizing: border-box;
}

/* light 底（D9）：成組定值、商家不可微調個別值——對比保障以「最暗黑底宿主」
   為最壞情境枚舉驗證。狀態色僅依底色換深淺，語義不變。 */
[data-orb-base='light'] {
    --orb-surface-0: rgba(248, 250, 255, 0.62);
    --orb-surface-1: rgba(255, 255, 255, 0.8);
    --orb-surface-2: rgba(255, 255, 255, 0.95);
    --orb-solid-base: #f8faff;
    --orb-text-primary: rgba(17, 21, 38, 0.95);
    --orb-text-secondary: rgba(54, 62, 92, 0.74);
    --orb-edge: rgba(255, 255, 255, 0.75);
    --orb-hairline: rgba(20, 26, 48, 0.1);
    --orb-input-bg: rgba(255, 255, 255, 0.75);
    --orb-scrollbar: rgba(20, 26, 48, 0.3);
    --orb-status-running-bg: rgba(139, 92, 246, 0.16);
    --orb-status-running-text: #6d28d9;
    --orb-status-done-bg: rgba(34, 211, 238, 0.16);
    --orb-status-done-text: #0e7490;
    --orb-status-failed-bg: rgba(244, 114, 182, 0.18);
    --orb-status-failed-text: #be185d;
    /* 晨霧底：玻璃在亮色上的反光較柔（底已亮、白點不搶眼），改靠
       較強的內緣陰影撐出立體厚度，頂部 sheen 偏濕潤亮白。 */
    --orb-gloss-glint: rgba(255, 255, 255, 0.95);
    --orb-gloss-top: rgba(255, 255, 255, 0.7);
    --orb-gloss-caustic: rgba(255, 255, 255, 0);
    --orb-gloss-rim-top: rgba(255, 255, 255, 0.75);
    --orb-gloss-rim-bottom: rgba(20, 26, 48, 0.24);
}

/* auto 底（simplify-orb-input-chat）：跟隨訪客系統明暗。預設（系統深色或不支援）
   沿用 :root 暗色；系統淺色時切換為 light 同一組值。僅 orb_input 使用。 */
@media (prefers-color-scheme: light) {
    [data-orb-base='auto'] {
        --orb-surface-0: rgba(248, 250, 255, 0.62);
        --orb-surface-1: rgba(255, 255, 255, 0.8);
        --orb-surface-2: rgba(255, 255, 255, 0.95);
        --orb-solid-base: #f8faff;
        --orb-text-primary: rgba(17, 21, 38, 0.95);
        --orb-text-secondary: rgba(54, 62, 92, 0.74);
        --orb-edge: rgba(20, 26, 48, 0.12);
        --orb-hairline: rgba(20, 26, 48, 0.1);
        --orb-input-bg: rgba(255, 255, 255, 0.75);
        --orb-scrollbar: rgba(20, 26, 48, 0.3);
        --orb-status-running-bg: rgba(139, 92, 246, 0.16);
        --orb-status-running-text: #6d28d9;
        --orb-status-done-bg: rgba(34, 211, 238, 0.16);
        --orb-status-done-text: #0e7490;
        --orb-status-failed-bg: rgba(244, 114, 182, 0.18);
        --orb-status-failed-text: #be185d;
    }
}

/* conic gradient 的旋轉角：可註冊時用 @property 內插（不支援的瀏覽器
   降級為靜態漸層，視覺仍成立） */
@property --orb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes orb-aurora-rotate {
    to {
        --orb-angle: 360deg;
    }
}

@keyframes orb-breathe {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.04);
    }
}

@keyframes orb-pulse {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes orb-glow-throb {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.9;
    }
}

/* ============ Orb 觸發鈕 ============ */

.orb-trigger {
    position: fixed;
    left: 50%;
    bottom: calc(
        24px + env(safe-area-inset-bottom, 0px) + var(--orb-offset-bottom, 0px)
    );
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    background: var(--orb-surface-2);
    box-shadow:
        inset 0 0 0 1px var(--orb-edge),
        inset 0 2px 3px var(--orb-gloss-rim-top),
        inset 0 -9px 14px var(--orb-gloss-rim-bottom),
        0 0 24px color-mix(in srgb, var(--orb-aurora-b) 45%, transparent),
        0 4px 16px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    /* orb 永遠在 dock 之上：展開時 orb 被 data-hidden 隱藏（opacity 0 +
       pointer-events none，不擋互動）；收合時 orb 在最前面，dock 往它的位置
       縮小、躲到它背後消失 → 視覺上「黑框收進圓球」而非「黑框蓋著圓球」。 */
    z-index: 2147483002;
    transition:
        transform 150ms ease-out,
        box-shadow 150ms ease-out,
        opacity 200ms ease;
    animation: orb-breathe 4s ease-in-out infinite;
}

/* 內部極光核心 */
.orb-trigger::before {
    content: '';
    position: absolute;
    inset: -25%;
    border-radius: 50%;
    background: conic-gradient(
        from var(--orb-angle, 0deg),
        var(--orb-aurora-a),
        var(--orb-aurora-b),
        var(--orb-aurora-c),
        var(--orb-aurora-a)
    );
    filter: blur(10px);
    opacity: 0.85;
    animation: orb-aurora-rotate 8s linear infinite;
}

/* chat icon：CSS mask 單一真相來源（React 與 loader 各自掛同名 span）。
   疊在極光核心之上、specular 高光之下——高光掃過 icon 表面融入玻璃。 */
.orb-trigger__icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(228, 236, 255, 0.82)
    );
    filter: drop-shadow(0 1px 3px rgba(10, 12, 24, 0.4));
    pointer-events: none;
}

[data-orb-base='light'] .orb-trigger__icon {
    background: linear-gradient(
        180deg,
        rgba(22, 27, 48, 0.92),
        rgba(54, 62, 92, 0.85)
    );
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.5));
}

/* 水晶光澤層（trigger 與 mini 預覽共用單一來源）：
   1) 角落銳利反光點——位置由 --orb-glint-x/y 微偏移（JS 隨機，無 JS 時用預設，
      每顆 orb 像獨立打磨的玻璃珠）
   2) 頂部弧形 sheen 光帶
   3) 底部 caustic 折射弧（光穿過玻璃珠的聚光，暗底才明顯）
   皆中性白高光，疊在極光色之上、不改變色相 → 不影響色彩配置。 */
.orb-trigger::after,
.orb-preview-ball::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at calc(30% + var(--orb-glint-x, 0px))
                calc(24% + var(--orb-glint-y, 0px)),
            var(--orb-gloss-glint),
            transparent 22%
        ),
        radial-gradient(
            ellipse 92% 60% at 50% -18%,
            var(--orb-gloss-top),
            transparent 62%
        ),
        radial-gradient(
            ellipse 70% 42% at 50% 120%,
            var(--orb-gloss-caustic),
            transparent 60%
        );
}

.orb-trigger:hover {
    transform: translateX(-50%) scale(1.08);
    box-shadow:
        inset 0 0 0 1px var(--orb-edge),
        0 0 36px color-mix(in srgb, var(--orb-aurora-b) 65%, transparent),
        0 6px 20px rgba(0, 0, 0, 0.4);
}

.orb-trigger:focus-visible {
    outline: 2px solid var(--orb-aurora-a);
    outline-offset: 3px;
}

/* 串流中：核心加速 + 光暈脈動 */
.orb-trigger[data-streaming='true'] {
    animation:
        orb-breathe 4s ease-in-out infinite,
        orb-glow-throb 1.6s ease-in-out infinite;
}

.orb-trigger[data-streaming='true']::before {
    animation-duration: 2.5s;
}

/* 未讀亮點（粉）+ 單次擴散環 */
.orb-trigger__unread {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orb-aurora-c);
    box-shadow: 0 0 6px var(--orb-aurora-c);
}

.orb-trigger__unread::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--orb-aurora-c);
    animation: orb-pulse 900ms ease-out 1;
}

/* 收合期間隱藏 orb（morph 交接） */
.orb-trigger[data-hidden='true'] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.6);
}

/* ============ 輸入列收合態（orb_input 變體） ============
   與展開 dock 底部輸入列對齊（同位置 / 同寬 / 同樣式語言）做錨定轉場。 */

.orb-inputbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(
        24px + env(safe-area-inset-bottom, 0px) + var(--orb-offset-bottom, 0px)
    );
    width: min(720px, 100vw - 32px);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--orb-surface-2);
    -webkit-backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    box-shadow:
        inset 0 0 0 1px var(--orb-edge),
        0 0 24px color-mix(in srgb, var(--orb-aurora-b) 32%, transparent),
        0 6px 20px rgba(0, 0, 0, 0.26);
    z-index: 2147483002;
    transition:
        transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 280ms ease;
}

/* 串流中：邊框跑一條 aurora 流光（mask 限在邊框環帶；沿用 --orb-angle / rotate） */
.orb-inputbar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--orb-angle, 0deg),
        var(--orb-aurora-a),
        var(--orb-aurora-b),
        var(--orb-aurora-c),
        var(--orb-aurora-a)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.orb-inputbar[data-streaming='true']::before {
    opacity: 1;
    animation: orb-aurora-rotate 4s linear infinite;
}

.orb-inputbar__input {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 96px;
    resize: none;
    border: 1px solid var(--orb-hairline);
    border-radius: 999px;
    padding: 9px 16px;
    background: var(--orb-input-bg);
    color: var(--orb-text-primary);
    font-size: 14px;
    line-height: 1.4;
    outline: none;
}

.orb-inputbar__input::placeholder {
    color: var(--orb-text-secondary);
}

.orb-inputbar__input:focus-visible {
    border-color: var(--orb-aurora-a);
    box-shadow: 0 0 0 2px
        color-mix(in srgb, var(--orb-aurora-a) 25%, transparent);
}

/* 收合輸入列迴紋針（夾檔入口）：ghost 圓鈕，與送出鈕同高、置於 pill 左側。 */
.orb-inputbar__attach {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--orb-text-secondary);
    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.orb-inputbar__attach:hover {
    color: var(--orb-text-primary);
    background: var(--orb-hairline);
}

.orb-inputbar__attach:focus-visible {
    outline: 2px solid var(--orb-accent, var(--orb-aurora-a));
    outline-offset: 2px;
}

.orb-inputbar__send {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--orb-aurora-a),
        var(--orb-aurora-b)
    );
    box-shadow: 0 2px 10px
        color-mix(in srgb, var(--orb-aurora-b) 45%, transparent);
}

.orb-inputbar__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.orb-inputbar__send:focus-visible {
    outline: 2px solid var(--orb-aurora-a);
    outline-offset: 2px;
}

/* 未讀小點（收合期間回覆完成） */
.orb-inputbar__unread {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orb-aurora-c);
    box-shadow: 0 0 6px var(--orb-aurora-c);
}

/* 收合交接：淡出 + 微下移（dock 於同位置長出其輸入列） */
.orb-inputbar[data-hidden='true'] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
}

/* ============ 歡迎句 tip（orb_input 空狀態聚焦時） ============ */

/* 掛在 .orb-inputbar 內（定位錨點）：left/right 0 → 與輸入列 pill 同寬
   （聚焦展寬時 tip 一起展寬），浮在輸入列上方一輪。data-hidden 展開隱藏
   直接繼承。純顯示：pointer-events 不攔截宿主頁。 */
.orb-inputbar__tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    padding: 10px 14px;
    border: 1px solid var(--orb-hairline);
    border-radius: var(--orb-radius-card);
    background: var(--orb-surface-2);
    -webkit-backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    color: var(--orb-text-primary);
    font-size: 13px;
    line-height: 1.5;
    /* 長文案：多行換行 + 三行截斷 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: break-word;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 200ms ease,
        transform 200ms ease;
}

.orb-inputbar__tip[data-visible='true'] {
    opacity: 1;
    transform: translateY(0);
}

/* ============ 寬扁玻璃 dock ============ */

.orb-dock {
    position: fixed;
    left: 50%;
    bottom: calc(
        24px + env(safe-area-inset-bottom, 0px) + var(--orb-offset-bottom, 0px)
    );
    width: min(720px, 100vw - 32px);
    /* 預設高度（未拖曳前）：自 40dvh/380px 提高至較舒適值，足以閱讀完整訊息；
       桌機可由上緣把手拖曳調整，loader 以 inline style 覆蓋此預設並持久化。 */
    height: min(70dvh, 640px);
    border-radius: 24px;
    background: var(--orb-surface-0);
    -webkit-backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    box-shadow:
        inset 0 0 0 1px var(--orb-edge),
        0 8px 30px rgba(0, 0, 0, 0.28);
    z-index: 2147483001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--orb-text-primary);
    /* morph：以底部中央（orb 位置）為原點 scale + radius 內插 */
    transform-origin: 50% 100%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    transition:
        transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
        border-radius 360ms cubic-bezier(0.32, 0.72, 0, 1),
        bottom 360ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 280ms ease;
}

/* 收合終態：縮成比 orb 更小的圓塊、且往上抬到 orb 中心（bottom 30px），
   完全躲進 orb（z-index 較低）背後消失。orb 在前景全程是唯一前景物件。 */
.orb-dock[data-state='collapsed'],
.orb-dock[data-state='collapsing'] {
    transform: translateX(-50%) scale(0.06);
    bottom: 30px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

/* 收合：玻璃殼一路縮小躲進 orb 背後都維持實體，opacity 只在尾段（210→360ms）
   才溶解。orb 在前景淡入歸位，視覺上是「黑框收進圓球」而非整塊消失。 */
.orb-dock[data-state='collapsing'] {
    transition:
        transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
        border-radius 360ms cubic-bezier(0.32, 0.72, 0, 1),
        bottom 360ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 150ms ease 210ms;
}

.orb-dock[data-state='collapsed'] {
    visibility: hidden;
    transition-property: transform, border-radius, opacity, visibility;
}

/* 輸入列變體（orb_input）：收合動畫改「上下兩卡分開」——面板本身不再整塊
   scaleY 摺疊，只留位置 + 尾段淡出（透明框），實際動作交給兩張卡各自：
   對話卡淡出上移、輸入卡自身縮寬。pill 在同位置淡入接力。展開為其反向。 */
[data-collapse-into='input'] .orb-dock[data-state='collapsed'],
[data-collapse-into='input'] .orb-dock[data-state='collapsing'] {
    transform: translateX(-50%);
    bottom: calc(
        24px + env(safe-area-inset-bottom, 0px) + var(--orb-offset-bottom, 0px)
    );
    border-radius: var(--orb-radius-card);
}

/* ── orb_input 收合：上下兩卡各自動畫 ──
   預覽版由 .orb-dock[data-state] 驅動（兩張卡在同文件內）；嵌入版由 iframe 於
   orb:close 掛 .orb-embed[data-collapsed]（兩張卡在 iframe 內，同一份 CSS、
   iframe 頁內正常跑動畫——與預覽無異，只是觸發訊號來自 postMessage）。 */

/* 兩卡基礎過渡（展開 / 收合雙向皆平滑） */
[data-collapse-into='input'] .orb-dock__scroll {
    transition:
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

[data-collapse-into='input'] .orb-dock__input {
    transition:
        opacity 200ms ease,
        transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* 預覽版面板收合時不再整塊淡出內容，改由兩卡各自控制透明度 */
[data-collapse-into='input']
    .orb-dock[data-state='collapsing']
    .orb-dock__content,
[data-collapse-into='input']
    .orb-dock[data-state='collapsed']
    .orb-dock__content {
    opacity: 1;
}

/* 對話卡：淡出 + 微上移（獨立動畫） */
[data-collapse-into='input']
    .orb-dock[data-state='collapsing']
    .orb-dock__scroll,
[data-collapse-into='input']
    .orb-dock[data-state='collapsed']
    .orb-dock__scroll,
.orb-embed[data-collapsed='true'] .orb-dock__scroll {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
}

/* 輸入卡：自身寬度縮小（收向中央的收合輸入列）+ 尾段淡出 */
[data-collapse-into='input']
    .orb-dock[data-state='collapsing']
    .orb-dock__input,
[data-collapse-into='input'] .orb-dock[data-state='collapsed'] .orb-dock__input,
.orb-embed[data-collapsed='true'] .orb-dock__input {
    transform: scaleX(0.42);
    transform-origin: 50% 50%;
    opacity: 0;
}

/* 頂部 specular 高光帶 */
.orb-dock__specular {
    position: absolute;
    inset: 0 0 auto 0;
    height: 56px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    pointer-events: none;
}

/* 極光邊緣光暈：唯一允許的 blur 偽元素（D8 效能護欄），
   mask composite 限制在邊緣環帶 */
.orb-dock::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--orb-angle, 0deg),
        var(--orb-aurora-a),
        var(--orb-aurora-b),
        var(--orb-aurora-c),
        var(--orb-aurora-a)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: blur(28px);
    opacity: 0.55;
    animation: orb-aurora-rotate 14s linear infinite;
    pointer-events: none;
}

.orb-dock[data-streaming='true']::before {
    animation-duration: 6s;
    opacity: 0.85;
}

/* 內容層（morph 期間延遲淡入） */
.orb-dock__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    opacity: 1;
    transition: opacity 200ms ease 160ms;
}

.orb-dock[data-state='collapsed'] .orb-dock__content,
.orb-dock[data-state='collapsing'] .orb-dock__content {
    opacity: 0;
    transition-delay: 0ms;
}

/* 把手 */
/* 頂端膠囊：現為「拖曳調高」把手（非收合鈕）。 */
.orb-dock__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 4px;
    background: transparent;
    border: none;
    cursor: ns-resize;
    touch-action: none;
    color: var(--orb-text-secondary);
}

.orb-dock__handle:hover {
    color: var(--orb-text-primary);
}

.orb-dock__handle:focus-visible {
    outline: 2px solid var(--orb-aurora-a);
    outline-offset: -2px;
    border-radius: 8px;
}

.orb-dock__handle-bar {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
}

/* 拖曳調高把手 = 頂端膠囊（.orb-dock__handle）。嵌入端的膠囊改由 host 端 widget.js
   另建並掛在宿主面板上（直接調 host 面板高度，避免跨 iframe 座標換算）；故 iframe 內
   這顆膠囊隱藏，避免兩顆重疊。後台預覽（非 .orb-embed）的膠囊維持作為拖曳把手。 */
.orb-embed .orb-dock__handle {
    display: none;
}

/* 卷動區：dock 內唯一卷動容器 */
.orb-dock__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 16px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--orb-scrollbar) transparent;
}

/* 回到最新浮鈕 */
.orb-dock__jump-latest {
    position: absolute;
    right: 16px;
    bottom: 76px;
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    background: var(--orb-surface-2);
    color: var(--orb-text-primary);
    box-shadow:
        inset 0 0 0 1px var(--orb-edge),
        0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* 輸入列（最實的一層）：直向容器——附件 chips 列在上、輸入行（迴紋針/文字/送出）
   在下。無附件時只有輸入行，外觀與原本一致。 */
.orb-dock__input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px) * 0.5);
    background: var(--orb-surface-2);
    border-top: 1px solid var(--orb-hairline);
}

/* 輸入行：迴紋針 + textarea + 送出鈕（原 .orb-dock__input 的橫向排列移到此層）。 */
.orb-dock__input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* 卡內附件列：小 chip 靠左、可換行、與輸入行間留一點點空隙（gap 已提供）。 */
.orb-dock__chips {
    padding: 0;
}

.orb-dock__textarea {
    flex: 1;
    min-height: 38px;
    max-height: 120px;
    resize: none;
    border: 1px solid var(--orb-hairline);
    border-radius: 999px;
    padding: 9px 16px;
    background: var(--orb-input-bg);
    color: var(--orb-text-primary);
    font-size: 14px;
    line-height: 1.4;
    outline: none;
}

.orb-dock__textarea::placeholder {
    color: var(--orb-text-secondary);
}

.orb-dock__textarea:focus-visible {
    border-color: var(--orb-aurora-a);
    box-shadow: 0 0 0 2px
        color-mix(in srgb, var(--orb-aurora-a) 25%, transparent);
}

.orb-dock__send {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--orb-aurora-a),
        var(--orb-aurora-b)
    );
    box-shadow: 0 2px 10px
        color-mix(in srgb, var(--orb-aurora-b) 45%, transparent);
}

.orb-dock__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.orb-dock__send:focus-visible {
    outline: 2px solid var(--orb-aurora-a);
    outline-offset: 2px;
}

.orb-dock__send--stop {
    background: linear-gradient(
        135deg,
        var(--orb-aurora-c),
        var(--orb-aurora-b)
    );
}

/* ============ orb_input 標準 chat 面板（simplify-orb-input-chat） ============
   標準 AI chat：左右對話泡泡、單層輸入 pill。配色一律走設計系統標準主色
   （--primary-500，fallback 品牌綠 #7bb896），MUST NOT 用自定義極光三色。
   對話匡 drop shadow + 極光光暈 + specular 全部移除（乾淨標準外觀）。
   僅作用於 [data-collapse-into='input']，圓球（orb）與 bubble MUST NOT 受影響。 */
[data-collapse-into='input'] {
    /* 標準主色（非極光）：有 app.css 時用設計系統 token，否則 fallback 品牌綠 */
    --orb-accent: var(--primary-500, #7bb896);
}

/* 面板 / 收合終態 / task 卡圓角對齊 token */
[data-collapse-into='input'] .orb-dock,
[data-collapse-into='input'] .orb-dock[data-state='collapsed'],
[data-collapse-into='input'] .orb-dock[data-state='collapsing'] {
    border-radius: var(--orb-radius-card);
}

/* 展開態改「兩張獨立卡」：對話捲動區與輸入列各自成一張玻璃卡、上下分開浮著。
   故 .orb-dock 本身退為透明版面框（無底色 / 邊框 / 陰影 / 模糊），僅負責定位與
   morph；玻璃感移至 .orb-dock__scroll 與 .orb-dock__input 各自承載。overflow
   放行讓兩卡的 drop shadow 不被外框裁切。整體高度與 morph 不變（互動維持）。 */
[data-collapse-into='input'] .orb-dock {
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
}

/* 移除極光光暈 / specular / pill 極光流光——標準乾淨外觀，不帶自定義 orb 色彩。 */
[data-collapse-into='input'] .orb-dock::before,
[data-collapse-into='input'] .orb-dock__specular,
[data-collapse-into='input'] .orb-inputbar::before {
    display: none;
}

[data-collapse-into='input'] .orb-task {
    border-radius: var(--orb-radius-card);
}

/* 對話卡：捲動區自成一張玻璃卡（浮在上方）。flex:1 撐滿輸入卡以上的空間，
   對話顯示高度視覺上與原本一致；捲動 / 回到最新 / 自動捲動等互動不變。
   上邊距為 0：卡片頂緣貼齊面板頂端，讓 host 端固定於 top:0 的拖曳把手落在
   卡片上（padding-top 18px 留出把手空間、不壓到訊息）；上下空隙由輸入卡提供。 */
[data-collapse-into='input'] .orb-dock__scroll {
    margin: 0 14px 0;
    padding: 18px 16px 14px;
    border: 1px solid var(--orb-hairline);
    border-radius: var(--orb-radius-card);
    background: var(--orb-surface-1);
    -webkit-backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 輸入區單層 pill：外層 bar 去底色/上邊框，整條收成一個左右圓角 pill，
   輸入框透明無邊框、送出鈕塞在 pill 內右側；內距加大。 */
/* 附件列（chips）：與輸入卡歸為同一組——離對話卡 10px（＝原本無附件時
   對話↔輸入的距離）、離輸入卡近（6px）。故 chips 自帶 margin-top 拉開對話卡，
   緊接其後的輸入卡 margin-top 歸零（間距改由 chips margin-bottom 提供）。 */
/* 輸入卡：獨立於對話卡下方（margin-top 拉出上下空隙），自帶玻璃 + drop shadow
   （對話卡退為透明框後，輸入列需自行承載玻璃感）。直向容器（附件 chips 在上、
   輸入行在下）；無附件時維持單層 pill（radius chip）。 */
/* 圓角統一為 card 尺寸（--orb-radius-card），與對話卡一致；不論有無附件都
   同一圓角（不再用 pill 999px、不再依 :has 切換，避免有附件時圓角跳動）。 */
[data-collapse-into='input'] .orb-dock__input {
    margin: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px) * 0.5);
    padding: 8px 8px 8px 12px;
    background: var(--orb-input-bg);
    border: 1px solid var(--orb-hairline);
    border-radius: var(--orb-radius-card);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(var(--orb-blur)) saturate(140%);
    backdrop-filter: blur(var(--orb-blur)) saturate(140%);
}

[data-collapse-into='input'] .orb-dock__input:focus-within {
    border-color: var(--orb-accent);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.12),
        0 0 0 2px color-mix(in srgb, var(--orb-accent) 22%, transparent);
}

/* 卡內附件列：小 chip 靠左對齊（覆蓋卡片 padding-left 差異）。 */
[data-collapse-into='input'] .orb-dock__chips {
    padding: 0 2px;
}

[data-collapse-into='input'] .orb-dock__textarea {
    min-height: 34px;
    padding: 7px 6px 7px 8px;
    background: transparent;
    border: none;
    border-radius: 0;
}

[data-collapse-into='input'] .orb-dock__textarea:focus-visible {
    box-shadow: none;
}

/* 送出 / 停止鈕：無底色，主色直接上在 icon（currentColor）；去背景與陰影。 */
[data-collapse-into='input'] .orb-dock__send,
[data-collapse-into='input'] .orb-dock__send--stop,
[data-collapse-into='input'] .orb-inputbar__send {
    background: transparent;
    box-shadow: none;
    color: var(--orb-accent);
}

[data-collapse-into='input'] .orb-dock__send:focus-visible,
[data-collapse-into='input'] .orb-inputbar__send:focus-visible {
    outline-color: var(--orb-accent);
}

/* 收合態 pill（輸入列 / 繼續對話 chip）：移除陰影與光暈，改簡單 1px 線框。
   三態寬度（simplify-orb-input-chat）：
   - 靜置（短）：預設較窄。
   - 輸入中（長）：focus 時展開為滿寬。
   - 展開（長）：dock 本身（另一元件）。 */
[data-collapse-into='input'] .orb-inputbar {
    box-sizing: border-box;
    border: 1px solid var(--orb-hairline);
    /* 圓角統一為 card 尺寸（與展開對話卡 / 輸入卡一致）；不再用 999px pill。 */
    border-radius: var(--orb-radius-card);
    /* 極小化（收合 toggle）也帶輕微 drop shadow，與展開 dock 一致（#52 樣式）。 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    width: 300px;
    max-width: calc(100vw - 32px);
    transition:
        width 320ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 280ms ease;
    /* 毛玻璃背景：用半透明 surface-1 讓既有 backdrop-filter 透出玻璃感；保留一層
       淡底色（非全透明），避免被極端宿主背景嚴重染色。 */
    background: var(--orb-surface-1);
}

/* 輸入中：聚焦輸入框時展開為滿寬。 */
[data-collapse-into='input'] .orb-inputbar:focus-within {
    width: min(720px, 100vw - 32px);
}

/* 「繼續對話」chip：寬度對齊 idle（未聚焦）輸入列 pill（300px）；高度與
   輸入列一致（垂直 10px）、右側內距與垂直同（10px）——32px 圓形展開鈕與
   pill 圓端同心、保有呼吸空間不貼死邊緣；左側 14px 與輸入列迴紋針位置對齊。 */
[data-collapse-into='input'] .orb-inputbar--resume,
[data-collapse-into='input'] .orb-inputbar--resume:focus-within {
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 10px 10px 10px 14px;
}

[data-collapse-into='input'] .orb-inputbar__input {
    background: transparent;
    border: none;
    border-radius: 0;
}

[data-collapse-into='input'] .orb-inputbar__input:focus-visible {
    box-shadow: none;
}

[data-collapse-into='input'] .orb-inputbar__unread {
    background: var(--orb-accent);
    box-shadow: none;
}

/* 「繼續對話」chip（已有對話時的收合態）：顯示 agent 最後回覆片段，
   點擊展開還原對話。整條 pill 為一顆可點按鈕。 */
.orb-inputbar--resume {
    cursor: pointer;
    text-align: left;
    align-items: center;
    gap: 10px;
}

/* chip 內層展開鈕：root 為容器 div（迴紋針與展開鈕並列，button 不可巢狀
   button），本鈕撐滿剩餘寬、無自身外觀（外觀由 chip 容器提供）。 */
.orb-inputbar__resume-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.orb-inputbar__resume-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: var(--orb-text-secondary);
}

.orb-inputbar__resume-go {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--orb-radius-chip);
    color: #fff;
    background: var(--orb-accent);
}

/* ============ 標準 chat 對話泡泡（orb_input，layout='chat'） ============ */

.orb-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    /* 最後一則對話與底部輸入列之間留多一點呼吸空間。 */
    padding-bottom: 24px;
}

.orb-chat__row {
    display: flex;
}

.orb-chat__row--user {
    justify-content: flex-end;
}

.orb-chat__row--agent {
    justify-content: flex-start;
}

.orb-chat__bubble {
    max-width: 82%;
    padding: 11px 15px;
    border-radius: var(--orb-radius-card);
    font-size: 14px;
    line-height: 1.5;
    color: var(--orb-text-primary);
}

/* 用戶（右）：標準主色泡泡 + 白字（比照 components/chat MessageList）。 */
.orb-chat__bubble--user {
    background: var(--orb-accent);
    color: #fff;
    border-bottom-right-radius: var(--orb-radius-small);
}

/* agent（左）：玻璃表面泡泡 */
.orb-chat__bubble--agent {
    background: var(--orb-surface-1);
    border: 1px solid var(--orb-hairline);
    border-bottom-left-radius: var(--orb-radius-small);
}

/* 「思考中 / 回應中」三點動畫（送出後、回覆出現前 / 串流尚無文字時）。 */
.orb-chat__thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
}

.orb-chat__thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orb-text-secondary);
    animation: orb-thinking 1.2s ease-in-out infinite;
}

.orb-chat__thinking span:nth-child(2) {
    animation-delay: 0.18s;
}

.orb-chat__thinking span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes orb-thinking {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .orb-chat__thinking span {
        animation: none;
        opacity: 0.55;
    }
}

.orb-chat__text {
    white-space: pre-wrap;
    word-break: break-word;
}

.orb-chat__error {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: var(--orb-radius-card);
    background: var(--orb-status-failed-bg);
    color: var(--orb-status-failed-text);
    font-size: 13px;
}

/* ============ Task 區塊（任務式對話） ============ */

.orb-task {
    background: var(--orb-surface-1);
    border: 1px solid var(--orb-hairline);
    border-radius: 16px;
    margin-top: 10px;
    overflow: hidden;
}

.orb-task__header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--orb-text-primary);
    text-align: left;
    font-size: 13px;
}

.orb-task__header:focus-visible {
    outline: 2px solid var(--orb-aurora-a);
    outline-offset: -2px;
    border-radius: 12px;
}

.orb-task__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.orb-task--expanded .orb-task__title {
    white-space: normal;
}

.orb-task__time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--orb-text-secondary);
}

.orb-task__chevron {
    flex-shrink: 0;
    color: var(--orb-text-secondary);
    transition: transform 200ms ease;
}

.orb-task--expanded .orb-task__chevron {
    transform: rotate(180deg);
}

.orb-task__check {
    flex-shrink: 0;
    color: var(--orb-status-done-text);
}

/* 狀態 pill */
.orb-task__pill {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.orb-task__pill--running {
    background: var(--orb-status-running-bg);
    color: var(--orb-status-running-text);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
}

.orb-task__pill--done {
    background: var(--orb-status-done-bg);
    color: var(--orb-status-done-text);
}

.orb-task__pill--failed {
    background: var(--orb-status-failed-bg);
    color: var(--orb-status-failed-text);
}

/* 步驟列 */
.orb-task__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 0 14px 8px;
    font-size: 11px;
    color: var(--orb-text-secondary);
}

.orb-task__step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.orb-task__step--done {
    color: var(--orb-status-done-text);
}

.orb-task__step--running {
    color: var(--orb-status-running-text);
}

.orb-task__step-arrow {
    opacity: 0.45;
}

/* 滿版回應區 */
.orb-task__body {
    padding: 4px 14px 12px;
    font-size: 14px;
    color: var(--orb-text-primary);
}

.orb-task__retry {
    margin-top: 8px;
    border: 1px solid var(--orb-status-failed-text);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    background: transparent;
    color: var(--orb-status-failed-text);
    cursor: pointer;
}

/* orb 介面內的 markdown（prose 在暗玻璃上的覆寫） */
.orb-task__body .prose {
    --tw-prose-body: var(--orb-text-primary);
    --tw-prose-headings: var(--orb-text-primary);
    --tw-prose-bold: var(--orb-text-primary);
    --tw-prose-links: var(--orb-aurora-a);
    --tw-prose-code: var(--orb-text-primary);
    --tw-prose-quotes: var(--orb-text-secondary);
    --tw-prose-bullets: var(--orb-text-secondary);
    --tw-prose-counters: var(--orb-text-secondary);
    color: var(--orb-text-primary);
}

/* welcome 訊息 */
.orb-welcome {
    padding: 14px 16px;
    color: var(--orb-text-primary);
    font-size: 14px;
    white-space: pre-wrap;
}

/* 嵌入端透明內容層（/widget?mode=orb）：玻璃底板與 morph 由宿主 loader 提供，
   iframe 內只有 chrome + 內容，MUST NOT 再疊 backdrop-filter */
.orb-embed {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: transparent;
    color: var(--orb-text-primary);
}

/* 錯誤列 */
.orb-dock__error {
    padding: 6px 16px;
    font-size: 12px;
    background: var(--orb-status-failed-bg);
    color: var(--orb-status-failed-text);
}

/* ============ 設定頁 mini 預覽（widget-settings 專用，非 fixed） ============ */

.orb-preview-ball {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--orb-surface-2);
    box-shadow:
        inset 0 0 0 1px var(--orb-edge),
        inset 0 2px 3px var(--orb-gloss-rim-top),
        inset 0 -9px 14px var(--orb-gloss-rim-bottom),
        0 0 20px color-mix(in srgb, var(--orb-aurora-b) 45%, transparent),
        0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.orb-preview-ball::before {
    content: '';
    position: absolute;
    inset: -25%;
    border-radius: 50%;
    background: conic-gradient(
        from var(--orb-angle, 40deg),
        var(--orb-aurora-a),
        var(--orb-aurora-b),
        var(--orb-aurora-c),
        var(--orb-aurora-a)
    );
    filter: blur(9px);
    opacity: 0.85;
    animation: orb-aurora-rotate 8s linear infinite;
}

/* ::after 水晶光澤與 .orb-trigger 共用（見上方 grouped rule） */

.orb-preview-ball .orb-trigger__icon {
    width: 24px;
    height: 24px;
}

/* ============ 行動斷點：矮 sheet 變體（D7） ============ */

@media (max-width: 639px) {
    .orb-dock {
        width: 100vw;
        left: 0;
        bottom: 0;
        transform: translateX(0) scale(1);
        transform-origin: 50% 100%;
        /* 手機 sheet 維持不可拖曳；高度提高以利閱讀。 */
        height: min(72dvh, 560px);
        border-radius: 20px 20px 0 0;
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
    }

    .orb-dock[data-state='collapsed'],
    .orb-dock[data-state='collapsing'] {
        transform: translateX(0) scale(0.12);
    }
}

/* ============ 降級 ============ */

/* 無 backdrop-filter：底面提升不透明度（D3 / spec 定值） */
@supports not (backdrop-filter: blur(1px)) {
    .orb-dock {
        background: rgba(13, 16, 28, 0.95);
    }

    [data-orb-base='light'] .orb-dock {
        background: rgba(248, 250, 255, 0.95);
    }

    /* simplify-orb-input-chat：auto 底 + 系統淺色 → 提升為淺色實底（保對比） */
    @media (prefers-color-scheme: light) {
        [data-orb-base='auto'] .orb-dock {
            background: rgba(248, 250, 255, 0.95);
        }
    }
}

/* simplify-orb-input-chat：orb_input 行動斷點 sheet 圓角對齊 card token */
@media (max-width: 639px) {
    [data-collapse-into='input'] .orb-dock {
        border-radius: var(--orb-radius-card) var(--orb-radius-card) 0 0;
    }
}

/* 分頁不可見：暫停 idle 動效（OrbShell 以 data-page-hidden 切） */
[data-page-hidden='true'] .orb-trigger,
[data-page-hidden='true'] .orb-trigger::before,
[data-page-hidden='true'] .orb-dock::before {
    animation-play-state: paused;
}

/* reduced motion：morph 降級 200ms fade、極光停轉、呼吸 / 脈動停用 */
@media (prefers-reduced-motion: reduce) {
    .orb-trigger,
    .orb-trigger::before,
    .orb-trigger__unread::after,
    .orb-dock::before,
    .orb-inputbar[data-streaming='true']::before {
        animation: none;
    }

    .orb-trigger[data-streaming='true'] {
        animation: none;
    }

    /* 串流邊框降為靜態（保留可見、不旋轉）；收合交接降為純淡入淡出 */
    .orb-inputbar {
        transition: opacity 200ms ease;
        transform: translateX(-50%);
    }

    .orb-inputbar[data-hidden='true'] {
        transform: translateX(-50%);
    }

    .orb-dock {
        transition: opacity 200ms ease;
        transform: translateX(-50%) scale(1);
    }

    .orb-dock[data-state='collapsed'],
    .orb-dock[data-state='collapsing'] {
        transform: translateX(-50%) scale(1);
        border-radius: 24px;
    }

    .orb-dock__content {
        transition: none;
    }

    @media (max-width: 639px) {
        .orb-dock,
        .orb-dock[data-state='collapsed'],
        .orb-dock[data-state='collapsing'] {
            transform: translateX(0) scale(1);
        }
    }
}