/* =========================================================
   TaleInn｜Discuss V2 / Story 吧檯 - 第一階段視覺骨架
   僅作用於 .taleinn-story-page；其餘主題樣式不受影響。
   連線由 bar-lines.js 畫 SVG，留言功能沿用原有系統。
========================================================= */

.taleinn-story-page {
    --bar-green: var(--selected-darkgreen, #355E3B);
    --bar-route-brown: var(--bg-darkbrown, #3A332B);
    --bar-paper: var(--bg-card-lightbrown, #FAF8F3);
    --bar-ink: var(--title-darkbrown, #2F2A24);
    --bar-text: var(--text-darkbrown, #463F37);
    --bar-stroke: #a9a89e;
    --bar-surface: #fffdfa;
    --bar-muted: #77736c;
    --bar-max-width: 1100px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    color: var(--bar-text);
    font-family: "Noto Sans TC", sans-serif;
}

.taleinn-story-page *,
.taleinn-story-page *::before,
.taleinn-story-page *::after {
    box-sizing: border-box;
}

.taleinn-story-page .taleinn-story {
    margin: 0;
    padding: 0 0 88px;
}

/* 故事資訊：沿用現有故事與縮圖資料，不依賴額外插圖素材。 */
.taleinn-story-page .taleinn-story-hero {
    border-top: 1px solid rgba(106, 93, 81, .14);
    border-bottom: 1px solid rgba(106, 93, 81, .23);
    background: linear-gradient(110deg, #f5f0e8 0%, var(--bar-paper) 61%, #edf0e8 100%);
}

.taleinn-story-page .taleinn-story-hero-inner {
    width: min(100%, var(--bar-max-width));
    margin-inline: auto;
    padding: 46px clamp(18px, 4vw, 56px);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(24px, 5vw, 80px);
    min-height: 230px;
}

.taleinn-story-page .taleinn-story-info {
    flex: 1 1 590px;
    min-width: 0;
}

.taleinn-story-page .taleinn-story-title {
    margin: 0;
    color: var(--bar-ink);
    font-size: clamp(2.1rem, 4.3vw, 3.7rem);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

.taleinn-story-page .taleinn-story-original-title {
    margin: 10px 0 0;
    color: var(--bar-text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.13rem, 1.85vw, 1.5rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.taleinn-story-page .taleinn-story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 30px 0 0;
    padding: 0;
    font-size: .92rem;
}

.taleinn-story-page .taleinn-story-meta-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.taleinn-story-page .taleinn-story-meta dt {
    color: var(--bar-muted);
    white-space: nowrap;
}

.taleinn-story-page .taleinn-story-meta dd {
    margin: 0;
    color: var(--bar-ink);
    overflow-wrap: anywhere;
}

.taleinn-story-page .taleinn-story-cover {
    flex: 0 1 34%;
    width: 34%;
    max-width: 380px;
    max-height: 200px;
    overflow: hidden;
    border: 1px solid rgba(53, 94, 59, .18);
}

.taleinn-story-page .taleinn-story-cover-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* 閱讀位置：原本的後端表單保持不變。 */
.taleinn-story-page .taleinn-story-reading-position,
.taleinn-story-page .taleinn-story-chapters,
.taleinn-story-page .taleinn-story-comments {
    width: min(100%, var(--bar-max-width));
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 56px);
}

.taleinn-story-page .taleinn-story-reading-position {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 12px 30px;
    min-height: 105px;
    margin-block: 10px 20px;
    padding-block: 20px;
    background: #eef0e7;
    border-top: 1px solid #d8ded4;
    border-bottom: 1px solid #d8ded4;
}

.taleinn-story-page .taleinn-story-reading-position .taleinn-story-section-heading {
    min-width: 0;
}

.taleinn-story-page .taleinn-story-section-title {
    margin: 0 0 8px;
    font-size: clamp(1.14rem, 2vw, 1.5rem);
    line-height: 1.4;
    color: var(--bar-ink);
}

.taleinn-story-page .taleinn-story-section-description {
    margin: 0;
    color: var(--bar-muted);
    font-size: .84rem;
    line-height: 1.7;
}

.taleinn-story-page .taleinn-story-reading-position form {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.taleinn-story-page .taleinn-story-reading-position select,
.taleinn-story-page .taleinn-story-reading-position input,
.taleinn-story-page .taleinn-story-reading-position button {
    max-width: 100%;
    min-height: 40px;
    font: inherit;
    font-size: .88rem;
    border: 1px solid #929a8e;
    border-radius: 0;
}

.taleinn-story-page .taleinn-story-reading-position select,
.taleinn-story-page .taleinn-story-reading-position input {
    padding: 7px 9px;
    background: #fffdfa;
    color: var(--bar-ink);
}

.taleinn-story-page .taleinn-story-reading-position button {
    padding: 7px 14px;
    background: var(--bar-green);
    color: white;
    cursor: pointer;
}

/* 章節主幹。桌機與手機都使用左側直線主幹；RWD 只調整泡泡寬度與間距。 */
.taleinn-story-page .taleinn-story-chapters {
    padding-top: 12px;
}

.taleinn-story-page .taleinn-story-chapters-intro {
    margin: 0 0 16px;
    text-align: left;
}

/* 預設先畫出整條主幹（不用等 JS），避免第一章出現之前一片空白。 */
.taleinn-story-page .taleinn-story-chapter-list {
    --bar-axis-x: 26px;
    --bar-content-indent: 74px;
    --bar-node-size: 14px;
    position: relative;
    isolation: isolate;
    padding: 28px 0 58px var(--bar-content-indent);
}

.taleinn-story-page .taleinn-story-chapter-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: var(--bar-axis-x);
    width: 2px;
    background: var(--bar-green);
    transform: translateX(-50%);
    pointer-events: none;
}

.taleinn-story-page .taleinn-story-timeline-svg {
    display: none;
}

.taleinn-story-page .taleinn-story-chapter {
    position: relative;
    z-index: 1;
    /* 標題列和＋按鈕與對話泡泡同寬，避免按鈕飄在泡泡右方。 */
    width: min(100%, 900px);
    min-width: 0;
    margin: 0 0 66px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.taleinn-story-page .taleinn-story-chapter:last-of-type {
    margin-bottom: 0;
}

.taleinn-story-page .taleinn-story-chapter {
    /* 和主幹使用同一座標：絕不再分別寫死節點的 X 位置。 */
    --chapter-node-top: 9px;
    --chapter-node-left: calc(var(--bar-axis-x) - var(--bar-content-indent) - var(--bar-node-size) / 2);
    --chapter-line-left: calc(var(--bar-axis-x) - var(--bar-content-indent) + var(--bar-node-size) / 2);
    --chapter-line-width: calc(var(--bar-content-indent) - var(--bar-axis-x) - var(--bar-node-size) / 2);
}

/* 節點狀態以 PHP 的 is-readable / is-locked / is-final 為唯一判斷來源。
   ::before / ::after 改由節點本身使用，章節 ::after 保留水平線。 */
.taleinn-story-page .taleinn-story-chapter-node {
    position: absolute;
    top: var(--chapter-node-top);
    left: var(--chapter-node-left);
    z-index: 2;
    display: block;
    width: var(--bar-node-size);
    height: var(--bar-node-size);
    background: var(--bar-paper);
    border: 2px solid var(--bar-ink);
    pointer-events: none;
}

.taleinn-story-page .taleinn-story-chapter-node::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--bar-ink);
}

/* 未讀：空心正方形。 */
.taleinn-story-page .taleinn-story-chapter.is-locked .taleinn-story-chapter-node::after {
    display: none;
}

/* 終點：不論已讀與否都呈菱形。 */
.taleinn-story-page .taleinn-story-chapter.is-final .taleinn-story-chapter-node {
    transform: rotate(45deg);
}

/* 展開：一般已讀章節由實心正方形變成方框＋綠色菱形。 */
.taleinn-story-page .taleinn-story-chapter.is-readable.is-normal.is-open .taleinn-story-chapter-node::after {
    display: block;
    inset: 2px;
    background: var(--bar-green);
    transform: rotate(45deg) scale(.75);
}

/* V12：取消節點通往標題的水平線。節點本身與標題維持同一行。 */
.taleinn-story-page .taleinn-story-chapter::after {
    content: none;
    display: none;
}

.taleinn-story-page .taleinn-story-chapter-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    min-height: 32px;
    margin: 0 0 11px;
}

.taleinn-story-page .taleinn-story-chapter-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 4px;
    min-width: 0;
    color: var(--bar-ink);
    font-family: Georgia, "Noto Serif TC", serif;
}

.taleinn-story-page .taleinn-story-chapter-label {
    margin: 0;
    flex: 0 0 auto;
    font-size: 1.03rem;
    font-weight: 650;
    white-space: nowrap;
}

.taleinn-story-page .taleinn-story-chapter-title {
    margin: 0;
    min-width: 0;
    font-size: clamp(1.02rem, 1.3vw, 1.22rem);
    line-height: 1.4;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.taleinn-story-page .taleinn-story-chapter-add-placeholder {
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--bar-green);
    color: white;
    font: 400 1.5rem/1 "Noto Sans TC", sans-serif;
    user-select: none;
}

.taleinn-story-page .taleinn-story-chapter-lock {
    display: inline-block;
    flex-shrink: 0;
    color: var(--bar-muted);
    font-size: .82rem;
    white-space: nowrap;
}

.taleinn-story-page .taleinn-story-chapter-bubble {
    position: relative;
    width: min(100%, 900px);
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid var(--bar-stroke);
    border-radius: 0;
    background: var(--bar-surface);
    color: var(--bar-text);
    line-height: 1.68;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.taleinn-story-page .taleinn-story-chapter-bubble p {
    margin: 0;
}

.taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::before,
.taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::after {
    position: absolute;
    content: "";
    top: 100%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::before {
    left: 23px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 11px solid var(--bar-stroke);
}

.taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::after {
    left: 24px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid var(--bar-surface);
}

.taleinn-story-page .taleinn-story-bubble-more {
    display: block;
    margin-top: 4px;
    color: var(--bar-muted);
    font-size: .76rem;
}

.taleinn-story-page .taleinn-story-chapter-avatars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 38px;
    gap: 7px;
    padding: 12px 0 0 16px;
}

.taleinn-story-page .taleinn-story-avatar-slot {
    width: 32px;
    height: 32px;
    /* 會員頭像改為方形；主幹既有方形節點保持不變。 */
    border-radius: 0;
    flex: 0 0 32px;
    border: 1px solid #b6bdb5;
    background: radial-gradient(circle at 50% 39%, #899a8b 0 5px, transparent 5.5px),
        radial-gradient(ellipse at 50% 94%, #899a8b 0 11px, transparent 11.5px),
        #e8ece6;
}

.taleinn-story-page .taleinn-story-avatar-note {
    color: var(--bar-muted);
    font-size: .72rem;
}

.taleinn-story-page .taleinn-story-chapter-bubble--locked {
    background: #f0eee8;
    color: #817d74;
    border-color: #d5d0c7;
}

.taleinn-story-page .taleinn-story-chapter-bubble--locked::before,
.taleinn-story-page .taleinn-story-chapter-bubble--locked::after {
    display: none;
}

.taleinn-story-page .taleinn-story-empty {
    margin: 30px auto;
    padding: 18px;
    border: 1px solid #d6d2cb;
    text-align: center;
}

/* 目前沿用舊留言區，直到章節泡泡完成真實留言整合。 */
.taleinn-story-page .taleinn-story-comments {
    margin-top: 46px;
    padding-top: 32px;
    border-top: 1px solid #d6d2cb;
}

.taleinn-story-page .taleinn-story-comments > .taleinn-story-section-heading {
    margin-bottom: 18px;
}

/* 桌機以下：縮減主幹與字體寬度，不改版型結構。 */
@media (max-width: 1099px) {
    .taleinn-story-page .taleinn-story-hero-inner {
        gap: 28px;
    }

    .taleinn-story-page .taleinn-story-chapter-list {
        --bar-axis-x: 20px;
        --bar-content-indent: 58px;
    }

    .taleinn-story-page .taleinn-story-chapter {
        margin-bottom: 62px;
    }

    .taleinn-story-page .taleinn-story-chapter {
        width: min(100%, 760px);
    }

    .taleinn-story-page .taleinn-story-chapter-bubble {
        width: 100%;
    }
}

/* 手機：仍是左側直線主幹，重點是泡泡寬度、字級與不同章節的留白。 */
@media (max-width: 599px) {
    .taleinn-story-page .taleinn-story {
        padding-bottom: 56px;
    }

    .taleinn-story-page .taleinn-story-hero-inner {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 18px;
        min-height: 0;
        padding-block: 26px;
    }

    .taleinn-story-page .taleinn-story-info {
        flex: auto;
    }

    .taleinn-story-page .taleinn-story-title {
        font-size: clamp(1.9rem, 8vw, 2.55rem);
    }

    .taleinn-story-page .taleinn-story-meta {
        gap: 8px 20px;
        margin-top: 20px;
        font-size: .81rem;
    }

    .taleinn-story-page .taleinn-story-cover {
        flex: auto;
        width: 100%;
        max-width: 100%;
        max-height: 140px;
    }

    .taleinn-story-page .taleinn-story-cover-image {
        height: 140px;
    }

    .taleinn-story-page .taleinn-story-reading-position {
        display: block;
        padding-block: 18px;
    }

    .taleinn-story-page .taleinn-story-reading-position form {
        margin-top: 12px;
    }

    .taleinn-story-page .taleinn-story-chapters-intro {
        margin-block: 6px 18px;
    }

    .taleinn-story-page .taleinn-story-chapter-list {
        --bar-axis-x: 15px;
        --bar-content-indent: 42px;
        padding-top: 18px;
        padding-bottom: 34px;
    }

    .taleinn-story-page .taleinn-story-chapter {
        width: 100%;
        margin-bottom: 72px;
    }

    .taleinn-story-page .taleinn-story-chapter-header {
        gap: 7px;
    }

    .taleinn-story-page .taleinn-story-chapter-heading {
        column-gap: 6px;
    }

    .taleinn-story-page .taleinn-story-chapter-label,
    .taleinn-story-page .taleinn-story-chapter-title {
        font-size: .93rem;
    }

    .taleinn-story-page .taleinn-story-chapter-add-placeholder {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .taleinn-story-page .taleinn-story-chapter-bubble {
        width: 100%;
        padding: 12px 11px;
        font-size: .85rem;
    }

    .taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::before {
        left: 11px;
    }

    .taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::after {
        left: 12px;
    }

    .taleinn-story-page .taleinn-story-chapter-avatars {
        padding-left: 7px;
        padding-top: 13px;
        gap: 4px;
    }

    .taleinn-story-page .taleinn-story-avatar-slot {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .taleinn-story-page .taleinn-story-avatar-note {
        font-size: .67rem;
    }

    .taleinn-story-page .taleinn-story-comments {
        margin-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taleinn-story-page *,
    .taleinn-story-page *::before,
    .taleinn-story-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* V6 最終保護：任何視窗下章節與泡泡都不能超出可用寬度。 */
.taleinn-story-page .taleinn-story-chapter-list,
.taleinn-story-page .taleinn-story-chapter,
.taleinn-story-page .taleinn-story-chapter-header,
.taleinn-story-page .taleinn-story-chapter-bubble {
    max-width: 100%;
    min-width: 0;
}
.taleinn-story-page .taleinn-story-chapter-heading {
    overflow-wrap: anywhere;
}

/* 閱讀位置的起點標記：菱形外框＋實心菱形，固定在「我目前讀到」左側。 */
.taleinn-story-page .taleinn-story-reading-position {
    display: block;
    position: relative;
    margin-bottom: 8px;
}
.taleinn-story-page .taleinn-story-reading-route {
    --bar-axis-x: 26px;
    --bar-content-indent: 74px;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 56px;
    margin-top: 12px;
    padding-left: var(--bar-content-indent);
}
.taleinn-story-page .taleinn-story-start-node {
    display: block;
    position: absolute;
    left: calc(var(--bar-axis-x) - 10px);
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) rotate(45deg);
    border: 2px solid var(--bar-ink);
    background: var(--bar-paper);
}
.taleinn-story-page .taleinn-story-start-node::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--bar-ink);
}
.taleinn-story-page .taleinn-story-reading-form-wrap,
.taleinn-story-page .taleinn-story-reading-form-wrap form {
    min-width: 0;
    max-width: 100%;
}
.taleinn-story-page .taleinn-story-reading-form-wrap form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
@media (max-width: 1099px) {
    .taleinn-story-page .taleinn-story-reading-route {
        --bar-axis-x: 20px;
        --bar-content-indent: 58px;
    }
}
@media (max-width: 599px) {
    .taleinn-story-page .taleinn-story-reading-route {
        --bar-axis-x: 15px;
        --bar-content-indent: 42px;
    }
}

/* 泡泡縮小狀態：點擊展開同一位置的完整預覽內容。 */
.taleinn-story-page .taleinn-story-bubble-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}
.taleinn-story-page .taleinn-story-bubble-toggle:focus-visible {
    outline: 2px solid var(--bar-green);
    outline-offset: 5px;
}
.taleinn-story-page .taleinn-story-chapter-bubble.is-expanded .taleinn-story-bubble-short,
.taleinn-story-page .taleinn-story-chapter-bubble.is-expanded .taleinn-story-bubble-more {
    display: none;
}
.taleinn-story-page .taleinn-story-bubble-body:not([hidden]) {
    display: block;
    min-height: 110px;
    padding-top: 1px;
}
.taleinn-story-page .taleinn-story-bubble-body[hidden] { display: none !important; }
.taleinn-story-page .taleinn-story-bubble-body p + p { margin-top: 12px; }
.taleinn-story-page .taleinn-story-bubble-pending {
    font-size: .86em;
    color: var(--bar-muted);
}
.taleinn-story-page .taleinn-story-chapter-bubble.is-expanded {
    border-color: var(--bar-green);
}


/* ========================================================
   V8｜緊湊閱讀列、統一主幹、原生泡泡展開、明確的第五種節點
   本段覆寫舊版閱讀位置卡片，保留原生 WordPress 表單功能。
======================================================== */
.taleinn-story-page .taleinn-story-route {
    --bar-axis-x: 26px;
    --bar-content-indent: 74px;
    --bar-node-size: 20px;
    --bar-route-padding: clamp(18px, 4vw, 56px);
    position: relative;
    width: min(100%, var(--bar-max-width));
    margin-inline: auto;
    padding-inline: var(--bar-route-padding);
    padding-top: 18px;
    padding-bottom: 6px;
}
/* 從起點菱形一路連到最後一章的共用主幹。 */
.taleinn-story-page .taleinn-story-route::before {
    content: none;
    position: absolute;
    top: var(--bar-line-top, 46px);
    bottom: auto;
    height: var(--bar-line-height, 0px);
    /* JS 精準量測菱形中心，手機表單換行仍與節點共軸。 */
    left: var(--bar-line-x, calc(var(--bar-route-padding) + var(--bar-axis-x)));
    width: 2px;
    transform: translateX(-50%);
    background: var(--bar-green);
    z-index: 0;
    pointer-events: none;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-position,
.taleinn-story-page .taleinn-story-route .taleinn-story-chapters {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-route {
    --bar-axis-x: inherit;
    --bar-content-indent: inherit;
    display: flex;
    align-items: center;
    min-height: 56px;
    max-width: 100%;
    margin: 0;
    padding-left: var(--bar-content-indent);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-form-wrap {
    width: 100%;
    min-width: 0;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-form-wrap form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-form-wrap select {
    max-width: 100%;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-start-node {
    z-index: 2;
    left: calc(var(--bar-axis-x) - 10px);
    background: var(--bar-paper);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-list {
    --bar-axis-x: inherit;
    --bar-content-indent: inherit;
    --bar-node-size: inherit;
    padding: 30px 0 48px var(--bar-content-indent);
}
/* 舊版章節線不要重複繪製，改由 route 統一連接起點。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-list::before {
    content: none;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter {
    --chapter-node-top: 6px;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-node {
    border-width: 2px;
    background: var(--bar-paper);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-node::after {
    inset: auto;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--bar-ink);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter.is-locked .taleinn-story-chapter-node::after {
    display: none;
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter.is-final .taleinn-story-chapter-node::after {
    transform: translate(-50%, -50%);
}
/* 第五種：明顯可辨的「外框方形＋綠色實心菱形」。
   :has(details[open]) 讓狀態不依賴 JavaScript 也能立即更新。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter.is-readable.is-normal:is(.is-open, :has(.taleinn-story-bubble-details[open])) .taleinn-story-chapter-node::after {
    display: block;
    width: 10px;
    height: 10px;
    /* inset 必須先宣告，否則會把 left/top: 50% 覆蓋成 auto。 */
    inset: auto;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    background: #17863c;
    transform: translate(-50%, -50%) rotate(45deg);
}
/* 泡泡只在縮小狀態有指向第一位頭像的尖角。 */
.taleinn-story-page .taleinn-story-chapter-bubble:has(.taleinn-story-bubble-details[open])::before,
.taleinn-story-page .taleinn-story-chapter-bubble:has(.taleinn-story-bubble-details[open])::after,
.taleinn-story-page .taleinn-story-chapter-bubble.is-expanded::before,
.taleinn-story-page .taleinn-story-chapter-bubble.is-expanded::after {
    content: none;
}
.taleinn-story-page .taleinn-story-bubble-details {
    display: block;
    margin: 0;
}
.taleinn-story-page .taleinn-story-bubble-summary {
    list-style: none;
    display: block;
    cursor: pointer;
    outline-offset: 4px;
}
.taleinn-story-page .taleinn-story-bubble-summary::-webkit-details-marker { display: none; }
.taleinn-story-page .taleinn-story-bubble-summary::marker { content: ""; }
.taleinn-story-page .taleinn-story-bubble-open-title { display: none; }
.taleinn-story-page .taleinn-story-bubble-details[open] .taleinn-story-bubble-short,
.taleinn-story-page .taleinn-story-bubble-details[open] .taleinn-story-bubble-more { display: none; }
.taleinn-story-page .taleinn-story-bubble-details[open] .taleinn-story-bubble-open-title {
    display: inline;
    font-weight: 600;
    color: var(--bar-green);
}
.taleinn-story-page .taleinn-story-bubble-details[open] .taleinn-story-bubble-body {
    display: block;
    margin-top: 12px;
}
.taleinn-story-page .taleinn-story-chapter-bubble:has(.taleinn-story-bubble-details[open]) {
    border-color: var(--bar-green);
}
/* 成功通知僅作視覺隱藏：JS 會為文字完全相符者附上此類。 */
.taleinn-story-page .taleinn-story-notice-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (max-width: 1099px) {
    .taleinn-story-page .taleinn-story-route {
        --bar-axis-x: 20px;
        --bar-content-indent: 58px;
    }
}
@media (max-width: 599px) {
    .taleinn-story-page .taleinn-story-route {
        --bar-axis-x: 15px;
        --bar-content-indent: 42px;
        --bar-route-padding: 14px;
        padding-top: 10px;
    }
    .taleinn-story-page .taleinn-story-route .taleinn-story-reading-form-wrap form {
        margin-top: 0;
        gap: 7px;
    }
    .taleinn-story-page .taleinn-story-route .taleinn-story-chapter-list {
        padding-top: 22px;
    }
    .taleinn-story-page .taleinn-story-route .taleinn-story-chapter {
        margin-bottom: 72px;
    }
}

/* 整個縮小泡泡都可點擊，不限於文字所在的一小塊。 */
.taleinn-story-page .taleinn-story-chapter-bubble:has(.taleinn-story-bubble-details:not([open])) .taleinn-story-bubble-summary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* ========================================================
   V9｜閱讀位置起點精準對齊「我」字；主幹／節點全面深棕
   注意：新增留言＋、更新閱讀位置是操作按鈕，保持原有按鈕配色。
======================================================== */

/* 成功通知移除後不保留任何高度或間距；錯誤訊息照常顯示。 */
.taleinn-story-page .taleinn-story-notice-visually-hidden {
    display: none !important;
}

/* JavaScript 會測量「我」字並設定實際中心；尚未執行時仍有回退位置。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-start-node {
    top: var(--bar-start-center-y, 50%);
    border-color: var(--bar-route-brown);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-start-node::after {
    background: var(--bar-route-brown);
}

/* 只保留主幹，章節水平線已取消。 */
.taleinn-story-page .taleinn-story-route::before {
    background: var(--bar-route-brown);
}

/* 已讀、未讀、終點四種狀態均遵循深棕系統色。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-node {
    border-color: var(--bar-route-brown);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-node::after {
    background: var(--bar-route-brown);
}

/* 第五種：展開時的內部菱形也改深棕，不再用鮮綠或深綠。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter.is-readable.is-normal:is(.is-open, :has(.taleinn-story-bubble-details[open])) .taleinn-story-chapter-node::after {
    background: var(--bar-route-brown);
}

/* 展開狀態的泡泡邊框與內標題也統一成深棕。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-bubble:has(.taleinn-story-bubble-details[open]),
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-bubble.is-expanded {
    border-color: var(--bar-route-brown);
}
.taleinn-story-page .taleinn-story-route .taleinn-story-bubble-details[open] .taleinn-story-bubble-open-title {
    color: var(--bar-route-brown);
}


/* =========================================================
   V11｜起點菱形綁定原生表單 label（JS 停用仍不會上下錯位）
   標籤與菱形共享同一行的中心，不受手機換行、提示文字影響。
========================================================= */
.taleinn-story-page .taleinn-story-route .taleinn-reading-position form label[for="taleinn-reading-position-select"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: 100%;
    white-space: nowrap;
}

.taleinn-story-page .taleinn-story-route .taleinn-reading-position form label[for="taleinn-reading-position-select"] > .taleinn-story-start-node {
    /* 相對於「我目前讀到」文字的左側，不再相對整個表單置中 */
    position: absolute;
    top: 50%;
    left: calc(var(--bar-axis-x) - var(--bar-content-indent) - 10px);
    right: auto;
    bottom: auto;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) rotate(45deg);
    border: 2px solid var(--bar-route-brown, #3A332B);
    background: var(--bar-paper);
    z-index: 3;
}

.taleinn-story-page .taleinn-story-route .taleinn-reading-position form label[for="taleinn-reading-position-select"] > .taleinn-story-start-node::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--bar-route-brown, #3A332B);
}

/* V12：避免主題中其他章節 CSS 意外恢復水平連線。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter::after {
    content: none;
    display: none;
}



/* V14：主幹只有真正的起點至終點長度，沒有遮罩也沒有補畫的假線。 */
.taleinn-story-page .taleinn-story-route.is-line-ready::before {
    content: "";
}


/* ============================================================
   V15｜不依賴 JavaScript 的真正「分段主幹」
   不使用假線、不使用背景遮蓋，也不向最後一章下方延伸。
   各章線段跟隨自身內容高度與間距變動。
============================================================ */
.taleinn-story-page .taleinn-story-route {
    --bar-segment-gap: 66px;
    --bar-first-node-offset: 42px;
}

/* V14 那條需要 JS 才會出現的整段主幹不再使用。 */
.taleinn-story-page .taleinn-story-route::before,
.taleinn-story-page .taleinn-story-route.is-line-ready::before {
    content: none !important;
    display: none !important;
}

/* 讓第一行的「我目前讀到」和起點菱形在所有寬度下對齊。
   按鈕換行只會增加區塊高度，不會改變線條起點。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-route {
    align-items: flex-start;
}

/* 第一段：從起點菱形中心，畫到閱讀位置區塊的底端。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-reading-route::before {
    content: "";
    position: absolute;
    left: var(--bar-axis-x);
    top: 20px;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--bar-route-brown, #3A332B);
    pointer-events: none;
    z-index: 0;
}

/* 第二段：從章節清單頂端接到第一章的節點中心。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: var(--bar-axis-x);
    top: 0;
    bottom: auto;
    height: var(--bar-first-node-offset);
    width: 2px;
    transform: translateX(-50%);
    background: var(--bar-route-brown, #3A332B);
    pointer-events: none;
}

/* 中間各段：當章節泡泡增高，線段也會自然增長到下一章。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(var(--bar-axis-x) - var(--bar-content-indent));
    top: calc(var(--chapter-node-top) + var(--bar-node-size) / 2);
    bottom: calc(-1 * var(--bar-segment-gap));
    height: auto;
    width: 2px;
    transform: translateX(-50%);
    background: var(--bar-route-brown, #3A332B);
    pointer-events: none;
}

/* 最後一段只從最後一章頂端畫到「終點菱形中心」，真正結束。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter.is-final::before {
    top: 0;
    bottom: auto;
    height: calc(var(--chapter-node-top) + var(--bar-node-size) / 2);
}

@media (max-width: 1099px) {
    .taleinn-story-page .taleinn-story-route {
        --bar-segment-gap: 62px;
    }
}
@media (max-width: 599px) {
    .taleinn-story-page .taleinn-story-route {
        --bar-segment-gap: 72px;
        --bar-first-node-offset: 32.5px;
    }
}

/* 不載入 JS 時，也讓第一段和第一章節點完整銜接。 */
.taleinn-story-page .taleinn-story-route .taleinn-story-chapter {
    --chapter-node-top: 2px;
}
@media (max-width: 599px) {
    .taleinn-story-page .taleinn-story-route .taleinn-story-chapter {
        --chapter-node-top: .5px;
    }
}
@media (max-width: 359px) {
    .taleinn-story-page .taleinn-story-route .taleinn-story-reading-route::before {
        top: 14px;
    }
}

/* =========================================================
   V16｜真實章節留言資料（只改內容與頭像，不動 V15 分段主幹）
========================================================= */
.taleinn-story-page .taleinn-story-avatar-slot {
    display: block;
    overflow: hidden;
}
.taleinn-story-page .taleinn-story-avatar-slot .taleinn-story-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    max-width: 100%;
}
.taleinn-story-page .taleinn-story-bar-comment-text {
    font-size: .95em;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.taleinn-story-page .taleinn-story-bar-comment-text > :last-child {
    margin-bottom: 0;
}
.taleinn-story-page .taleinn-story-bar-comment-text a {
    overflow-wrap: anywhere;
}
.taleinn-story-page .taleinn-story-avatar-note {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 真實留言通常短於測試佔位文案，展開後不必保留固定空白高度。 */
.taleinn-story-page .taleinn-story-bubble-details[open] .taleinn-story-bubble-body {
    min-height: 0;
}


/* =========================================================
   V17｜可操作的方形會員頭像、＋N、五秒輪播
   不修改 V15 的分段主幹或節點定位。
========================================================= */
.taleinn-story-page .taleinn-story-chapter-avatars[data-bar-avatar-roster] {
    flex-wrap: wrap;
    gap: 7px;
}
.taleinn-story-page .taleinn-story-avatar-button {
    appearance: none;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.taleinn-story-page .taleinn-story-avatar-button[hidden],
.taleinn-story-page .taleinn-story-avatar-more[hidden],
.taleinn-story-page .taleinn-story-avatar-pause[hidden],
.taleinn-story-page .taleinn-story-avatar-note[hidden] {
    display: none !important;
}
.taleinn-story-page .taleinn-story-avatar-button .taleinn-story-avatar-slot {
    display: block;
    pointer-events: none;
}
.taleinn-story-page .taleinn-story-avatar-button.is-active .taleinn-story-avatar-slot,
.taleinn-story-page .taleinn-story-avatar-button:hover .taleinn-story-avatar-slot {
    outline: 2px solid var(--bar-route-brown, #3A332B);
    outline-offset: 2px;
}
.taleinn-story-page .taleinn-story-avatar-button:focus-visible,
.taleinn-story-page .taleinn-story-avatar-more:focus-visible,
.taleinn-story-page .taleinn-story-avatar-pause:focus-visible {
    outline: 2px solid var(--bar-route-brown, #3A332B);
    outline-offset: 3px;
}
.taleinn-story-page .taleinn-story-avatar-more,
.taleinn-story-page .taleinn-story-avatar-pause {
    appearance: none;
    min-height: 32px;
    padding: 2px 5px;
    background: transparent;
    border: 1px solid #b3b0a8;
    border-radius: 0;
    color: var(--bar-route-brown, #3A332B);
    font-size: .74rem;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
}
.taleinn-story-page .taleinn-story-avatar-pause {
    border-color: transparent;
    color: var(--bar-muted);
    padding-inline: 2px;
}
.taleinn-story-page .taleinn-story-avatar-pause[aria-pressed="true"] {
    color: var(--bar-route-brown, #3A332B);
    text-decoration: underline;
}
@media (max-width: 599px) {
    .taleinn-story-page .taleinn-story-chapter-avatars[data-bar-avatar-roster] { gap: 5px; }
    .taleinn-story-page .taleinn-story-avatar-more,
    .taleinn-story-page .taleinn-story-avatar-pause { min-height: 27px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
    .taleinn-story-page .taleinn-story-avatar-button { transition: none !important; }
}

/* ============================================================
   V18｜章節吧檯內展開酒桌（不增加第三層頁面）
   以下是獨立新增樣式。V15 分段主幹、節點、V17 頭像維持原設定。
   ============================================================ */
.taleinn-story-page.is-table-open {
    --taleinn-table-width: min(480px, 42vw);
    box-sizing: border-box;
    padding-right: var(--taleinn-table-width);
    transition: padding-right .2s ease;
}
.taleinn-story-page .taleinn-story-chapter.is-table-active .taleinn-story-chapter-bubble {
    border-color: var(--bar-route-brown, #3A332B);
    box-shadow: 0 0 0 1px rgba(58,51,43,.14);
}
.taleinn-story-page .taleinn-story-chapter .taleinn-story-bubble-summary:focus-visible {
    outline: 2px solid var(--bar-green);
    outline-offset: 4px;
}
.taleinn-story-page .taleinn-table-panel[hidden],
.taleinn-story-page .taleinn-table-chapter[hidden],
.taleinn-story-page .taleinn-table-reply-banner[hidden] { display: none !important; }
.taleinn-story-page .taleinn-table-panel {
    position: fixed;
    z-index: 80;
    top: 72px;
    right: 0;
    width: min(480px, 42vw);
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #faf8f3;
    border-left: 1px solid #cbc3b7;
    box-shadow: -12px 0 30px rgba(58,51,43,.10);
    color: var(--bar-text);
}
.taleinn-story-page .taleinn-table-heading {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #f3eee6;
    border-bottom: 1px solid #d1c8bc;
}
.taleinn-story-page .taleinn-table-heading-title { min-width: 0; }
.taleinn-story-page .taleinn-table-overline {
    display: block;
    margin-bottom: 4px;
    color: #736b61;
    font-size: .73rem;
    letter-spacing: .05em;
}
.taleinn-story-page .taleinn-table-heading h2 {
    margin: 0;
    font-size: clamp(.98rem, 1.45vw, 1.25rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.taleinn-story-page .taleinn-table-close {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #bcb5aa;
    border-radius: 5px;
    background: transparent;
    color: #3A332B;
    font-size: 1.7rem;
    cursor: pointer;
}
.taleinn-story-page .taleinn-table-close:hover,
.taleinn-story-page .taleinn-table-close:focus-visible {
    background: #e6e0d6;
}
.taleinn-story-page .taleinn-table-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 15px 22px;
    scroll-padding-block: 18px;
    scrollbar-gutter: stable;
}
.taleinn-story-page .taleinn-table-empty {
    color: var(--bar-muted);
    text-align: center;
    font-size: .86rem;
    line-height: 1.7;
    margin: 30px 0;
}
.taleinn-story-page .taleinn-table-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    margin: 0 0 16px;
    font-size: .86rem;
}
.taleinn-story-page .taleinn-table-message.is-own {
    justify-content: flex-end;
}
.taleinn-story-page .taleinn-table-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: block;
    overflow: hidden;
    margin-top: 3px;
    background: #e7e9e4;
    border: 1px solid #c9cec7;
}
.taleinn-story-page .taleinn-table-avatar img {
    width: 100%; height: 100%; display: block; object-fit: cover;
}
.taleinn-story-page .taleinn-table-message-content {
    min-width: 0;
    max-width: min(85%, 430px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-message-content {
    align-items: flex-end;
}
.taleinn-story-page .taleinn-table-meta {
    display: flex;
    gap: 5px 9px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: .7rem;
    color: #777066;
}
.taleinn-story-page .taleinn-table-meta strong { font-weight: 600; color: #493f35; }
.taleinn-story-page .taleinn-table-message-main { min-width: 0; max-width: 100%; }
.taleinn-story-page .taleinn-table-message-bubble {
    position: relative;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #dad3c8;
    border-radius: 3px 13px 13px 13px;
    background: #fffdfa;
    color: #39352f;
    overflow-wrap: anywhere;
    cursor: pointer;
    line-height: 1.7;
}
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-message-bubble {
    margin-left: auto;
    border-color: #355e3b;
    border-radius: 13px 3px 13px 13px;
    background: #355e3b;
    color: #fff;
}
.taleinn-story-page .taleinn-table-message-bubble:focus-visible {
    outline: 2px solid #a1b89c;
    outline-offset: 3px;
}
.taleinn-story-page .taleinn-table-message-text p { margin: 0; }
.taleinn-story-page .taleinn-table-message-text p + p { margin-top: 9px; }
.taleinn-story-page .taleinn-table-message-text a { color: inherit; text-decoration: underline; }
.taleinn-story-page .taleinn-table-quote {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 7px 8px;
    border: 0;
    border-left: 3px solid #acbaa9;
    border-radius: 3px;
    background: rgba(58,51,43,.07);
    color: inherit;
    font: inherit;
    font-size: .78rem;
    text-align: left;
    cursor: pointer;
}
.taleinn-story-page .taleinn-table-quote strong,
.taleinn-story-page .taleinn-table-quote span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.taleinn-story-page .taleinn-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .13s ease;
}
@media (hover: hover) and (pointer: fine) {
    .taleinn-story-page .taleinn-table-message:hover .taleinn-table-actions,
    .taleinn-story-page .taleinn-table-message:focus-within .taleinn-table-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
.taleinn-story-page .taleinn-table-message.is-actions-visible .taleinn-table-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.taleinn-story-page .taleinn-table-actions button,
.taleinn-story-page .taleinn-table-actions a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 29px;
    padding: 2px 8px;
    border: 1px solid #ccc4b9;
    border-radius: 5px;
    background: #fffdfa;
    color: #423e36;
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    text-decoration: none;
}
.taleinn-story-page .taleinn-table-actions .is-liked { color: #355e3b; border-color: #355e3b; }
.taleinn-story-page .taleinn-table-actions button:disabled { opacity: .6; cursor: not-allowed; }
.taleinn-story-page .taleinn-table-message.is-highlighted .taleinn-table-message-bubble {
    outline: 3px solid #b8c8a9;
    outline-offset: 3px;
}
.taleinn-story-page .taleinn-table-compose {
    flex: 0 0 auto;
    min-width: 0;
    padding: 12px 15px 14px;
    background: #f3eee6;
    border-top: 1px solid #cfc7ba;
}
.taleinn-story-page .taleinn-table-compose form { min-width: 0; }
.taleinn-story-page .taleinn-table-compose textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 67px;
    max-height: 30vh;
    resize: vertical;
    border: 1px solid #bcb2a5;
    border-radius: 7px;
    padding: 9px 11px;
    background: #fffdfa;
    color: #37332e;
    font: inherit;
    font-size: .87rem;
    line-height: 1.5;
}
.taleinn-story-page .taleinn-table-compose-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: #77736c;
    font-size: .73rem;
}
.taleinn-story-page .taleinn-table-submit,
.taleinn-story-page .taleinn-table-login {
    display: inline-block;
    padding: 8px 14px;
    min-height: 36px;
    background: #355e3b;
    border: none;
    border-radius: 5px;
    color: white;
    font: inherit;
    font-size: .86rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.taleinn-story-page .taleinn-table-submit:disabled { opacity: .55; cursor: wait; }
.taleinn-story-page .taleinn-table-reply-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px;
    margin-bottom: 8px;
    border-left: 3px solid #355e3b;
    background: #e5e9e0;
    color: #39352f;
    font-size: .75rem;
}
.taleinn-story-page .taleinn-table-reply-banner > div { min-width: 0; }
.taleinn-story-page .taleinn-table-reply-banner p {
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.taleinn-story-page .taleinn-table-reply-banner button {
    min-width: 29px;
    min-height: 29px;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
}
/* 平板／手機：酒桌作為所點章節之下的內嵌面板，保留 320px 可操作性。 */
@media (max-width: 899px) {
    .taleinn-story-page.is-table-open { padding-right: 0; }
    .taleinn-story-page .taleinn-table-panel {
        position: relative;
        z-index: 3;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        height: min(70dvh, 650px);
        min-height: 355px;
        margin-top: 12px;
        border: 1px solid #ccc4b9;
        border-radius: 7px;
        box-shadow: 0 8px 16px rgba(58,51,43,.08);
    }
    .taleinn-story-page .taleinn-table-feed { padding: 12px 9px 16px; }
    .taleinn-story-page .taleinn-table-heading { padding: 10px 11px; }
    .taleinn-story-page .taleinn-table-compose { padding: 9px 10px 10px; }
}
@media (max-width: 359px) {
    .taleinn-story-page .taleinn-table-avatar { width: 26px; height: 26px; flex-basis: 26px; }
    .taleinn-story-page .taleinn-table-message-content { max-width: 83%; }
    .taleinn-story-page .taleinn-table-message-bubble { padding: 8px 9px; }
    .taleinn-story-page .taleinn-table-heading h2 { font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) {
    .taleinn-story-page.is-table-open,
    .taleinn-story-page .taleinn-table-actions { transition: none !important; }
}

/* V19｜酒桌近即時狀態與新留言提示。絕不覆寫 V15 分段主幹。 */
.taleinn-story-page .taleinn-table-live-status {
    padding: 7px 14px;
    font-size: .78rem;
    line-height: 1.5;
    color: #5b4932;
    background: #fff5dc;
    overflow-wrap: anywhere;
}
.taleinn-story-page .taleinn-table-new-notice {
    appearance: none;
    display: block;
    width: fit-content;
    margin: 3px auto;
    padding: 7px 16px;
    color: #fff;
    background: var(--bar-green, #355E3B);
    font: inherit;
    font-size: .8rem;
    line-height: 1.4;
    border: 0;
    border-radius: 22px;
    cursor: pointer;
}
.taleinn-story-page .taleinn-table-new-notice[hidden],
.taleinn-story-page .taleinn-table-live-status[hidden] { display: none !important; }

/* ============================================================
   V19 視覺微調｜酒桌全面方角、桌機上緣實色
   僅影響酒桌內部，不更動 V15 主幹或 V19 即時留言邏輯。
   ============================================================ */
.taleinn-story-page .taleinn-table-panel,
.taleinn-story-page .taleinn-table-panel *,
.taleinn-story-page .taleinn-table-panel *::before,
.taleinn-story-page .taleinn-table-panel *::after {
    border-radius: 0 !important;
}

/* 酒桌標題列保留一致的實色米棕，不使用透明／漸層。 */
.taleinn-story-page .taleinn-table-heading {
    background: #f3eee6;
    background-image: none;
}

/* 桌機面板從導覽列下方 72px 開始；向上補同色實心色帶，
   讓原本淡化的上緣與酒桌標題列連成一片。
   不更動面板 top、高度、內容或滑動機制。 */
@media (min-width: 900px) {
    .taleinn-story-page .taleinn-table-panel {
        box-shadow:
            0 -72px 0 0 #f3eee6,
            -12px 0 30px rgba(58, 51, 43, .10);
    }
}


/* ============================================================
   V19 酒桌視覺微調｜桌機頂部貼齊、LINE 式雙色角標
   只影響酒桌。維持全方角、V15 主幹及 V19 即時同步功能。
   ============================================================ */
@media (min-width: 900px) {
    /* 讓完整標題列移到視窗頂端，收回原先預留的 72px，
       同時擴大訊息區可使用的高度。勿保留上一版的上緣填色陰影。 */
    .taleinn-story-page .taleinn-table-panel {
        top: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 1100;
        box-shadow: -12px 0 30px rgba(58, 51, 43, .10);
    }
}

/* 深綠泡泡內的引用訊息改為品牌淺綠，並使用深棕文字；
   他人的米白泡泡引用樣式保持原狀。 */
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote {
    background: var(--hover-lightgreen, #E2EBD6);
    border-left: 3px solid #759478;
    color: #3A332B;
}
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote strong {
    color: #355E3B;
}
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote span {
    color: #3A332B;
}

/* ============================================================
   V19｜酒桌引用配色＋右上封閉折角（V4）
   保留 V15 主幹、V19 近即時訊息和原有連續發言邏輯。
   ============================================================ */

/* 引用訊息與輸入區的「正在回覆」提示條統一採用同一組色票：
   灰綠底 #E5E9E0、深綠邊 #355E3B、深棕字 #39352F。 */
.taleinn-story-page .taleinn-table-quote,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote {
    background: #E5E9E0;
    border-left: 3px solid #355E3B;
    color: #39352F;
}
.taleinn-story-page .taleinn-table-quote strong,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote strong {
    color: #355E3B;
}
.taleinn-story-page .taleinn-table-quote span,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote span {
    color: #39352F;
}


/* ============================================================
   V19 酒桌折角 V5｜左右角標切齊泡泡外緣、同色 1px 細線
   幾何原則：SVG 9x9；路徑中心線距畫布邊緣 0.5px，
   描邊寬 1px，因此三角形水平／垂直外緣恰好落在畫布邊界。
   泡泡自帶 1px border，定位 -1px 與外框外緣完全齊平。
   不修改 V19 同步、連續發言、引用及 V15 主幹。
   ============================================================ */

/* V9｜左上角也改用「泡泡自身」的背景座標畫 9px 綠色折角。
   與已成功的 V8 右上角相同：沒有獨立定位的 SVG／偽元素，
   以 border-box 對齊，避免視窗寬度與裝置像素比造成取整差。 */
.taleinn-story-page .taleinn-table-message:not(.is-own):not(.is-continuation) .taleinn-table-message-bubble {
    background-color: #fffdfa;
    background-image: linear-gradient(135deg, #355E3B 0 50%, #fffdfa 50% 100%);
    background-repeat: no-repeat;
    background-size: 9px 9px;
    background-position: left top;
    background-origin: border-box;
    background-clip: border-box;
}

/* 關閉左側舊 SVG；新折角只由本體背景繪製。
   連續留言不會套入上方的背景規則，因此自動保持純方角。 */
.taleinn-story-page .taleinn-table-message:not(.is-own) .taleinn-table-message-bubble::before {
    content: none;
    display: none;
}

/* V8｜修正視窗變化時右上角角標和外框出現像素錯位。
   不再使用獨立定位的 ::after 角標：三角形直接畫在泡泡本身的
   背景圖層，且以 border-box 為基準定位。
   這樣米色缺角和深綠外框共用同一個盒子，不必兩次像素取整。 */
.taleinn-story-page .taleinn-table-message.is-own:not(.is-continuation) .taleinn-table-message-bubble {
    background-color: #355E3B;
    background-image: linear-gradient(45deg, #355E3B 0 50%, #FAF8F3 50% 100%);
    background-repeat: no-repeat;
    background-size: 9px 9px;
    background-position: right top;
    background-origin: border-box;
    background-clip: border-box;
}

/* 圓角（實為切角）不再以任何獨立子層覆蓋原本的 1px 邊框。 */
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-message-bubble::after {
    content: none;
    display: none;
}

/* 自己的泡泡不要殘留上一版 ::before 角標。 */
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-message-bubble::before {
    content: none;
    display: none;
}

/* 相鄰同作者且間隔 60 秒內，兩側角標皆完全消失。 */
.taleinn-story-page .taleinn-table-message.is-continuation .taleinn-table-message-bubble::before,
.taleinn-story-page .taleinn-table-message.is-continuation .taleinn-table-message-bubble::after {
    content: none;
    display: none;
}


/* ============================================================
   V20｜章節吧檯預覽：頭像固定、泡泡隨發言者移動、尖角對準頭像
   僅改「章節預覽」，不影響 V15 深棕主幹及 V19 酒桌留言折角。
   ============================================================ */
.taleinn-story-page .taleinn-story-chapter-bubble:not(.taleinn-story-chapter-bubble--locked) {
    width: max-content;
    max-width: 100%;
    min-width: 46px;
    transform: translateX(var(--bar-bubble-shift, 0px));
    transition: transform 420ms ease;
}
/* 短留言單行呈現；過長時最多佔滿章節寬度並自動換行。 */
.taleinn-story-page .taleinn-story-chapter-bubble .taleinn-story-bubble-short {
    display: inline;
    overflow-wrap: anywhere;
}
/* 整個泡泡本身可點擊；不需要另一行文字撐大短留言的寬度。 */
.taleinn-story-page .taleinn-story-chapter-bubble .taleinn-story-bubble-more {
    display: none;
}
/* 尖角中心與當前發言者頭像中心共用 --bar-tip-x。 */
.taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::before {
    left: calc(var(--bar-tip-x, 33px) - 10px);
    transition: left 420ms ease;
}
.taleinn-story-page .taleinn-story-chapter-bubble:not(.is-expanded)::after {
    left: calc(var(--bar-tip-x, 33px) - 9px);
    transition: left 420ms ease;
}
/* 若未有旅客頭像，先不畫一個指向空白位置的尖角。 */
.taleinn-story-page .taleinn-story-chapter:not(:has([data-bar-avatar])) .taleinn-story-chapter-bubble::before,
.taleinn-story-page .taleinn-story-chapter:not(:has([data-bar-avatar])) .taleinn-story-chapter-bubble::after {
    content: none;
}
@media (prefers-reduced-motion: reduce) {
    .taleinn-story-page .taleinn-story-chapter-bubble:not(.taleinn-story-chapter-bubble--locked),
    .taleinn-story-page .taleinn-story-chapter-bubble::before,
    .taleinn-story-page .taleinn-story-chapter-bubble::after {
        transition: none !important;
    }
}


/* ============================================================
   V21｜引用與對話同一個泡泡；只有水平分隔線，沒有內框。
   注意只限帶引用區的泡泡，完整保留 V9 雙側背景折角。
   ============================================================ */
.taleinn-story-page .taleinn-table-message-bubble:has(> .taleinn-table-quote) {
    padding: 0;
    overflow: hidden;
}
.taleinn-story-page .taleinn-table-message-bubble:has(> .taleinn-table-quote) > .taleinn-table-message-text {
    padding: 9px 12px 11px;
}
.taleinn-story-page .taleinn-table-quote,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px 8px;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
    opacity: .94;
}
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote {
    color: #f3f1eb;
    border-bottom-color: rgba(255,255,255,.43);
}
.taleinn-story-page .taleinn-table-message.is-other .taleinn-table-quote {
    border-bottom-color: #cfc8be;
}
.taleinn-story-page .taleinn-table-quote:disabled { cursor: default; opacity: .68; }
.taleinn-story-page .taleinn-table-quote-avatar {
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    overflow: hidden;
}
.taleinn-story-page .taleinn-table-quote-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.taleinn-story-page .taleinn-table-quote-content { display: block; flex: 1; min-width: 0; }
.taleinn-story-page .taleinn-table-quote-content strong,
.taleinn-story-page .taleinn-table-quote-content .taleinn-table-quote-excerpt,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote-content strong,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote-content .taleinn-table-quote-excerpt {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    color: inherit;
}
.taleinn-story-page .taleinn-table-quote-excerpt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
}
.taleinn-story-page .taleinn-table-quote:focus-visible { outline: 2px solid #91b495; outline-offset: -2px; }
/* @ 選人選單僅在正在輸入的酒桌出現，避免蓋住其他章節。 */
.taleinn-story-page .taleinn-table-compose form { position: relative; }
.taleinn-story-page .taleinn-table-mentions {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: calc(100% - 4px);
    max-height: 180px;
    overflow-y: auto;
    padding: 3px;
    border: 1px solid #b4ada2;
    background: #fffdfa;
    box-shadow: 0 -5px 15px rgba(58, 51, 43, .12);
}
.taleinn-story-page .taleinn-table-mentions[hidden] { display: none !important; }
.taleinn-story-page .taleinn-table-mentions button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 0;
    padding: 6px 8px;
    background: #fffdfa;
    color: #3A332B;
    font: inherit;
    font-size: .83rem;
    cursor: pointer;
    text-align: left;
}
.taleinn-story-page .taleinn-table-mentions button:hover,
.taleinn-story-page .taleinn-table-mentions button[aria-selected="true"] {
    background: #e5e9e0;
}
.taleinn-story-page .taleinn-table-mentions button img {
    width: 28px;
    height: 28px;
    object-fit: cover;
}
.taleinn-story-page .taleinn-table-mentions-empty {
    padding: 9px;
    color: #736b61;
    font-size: .8rem;
}

/* 保證自己的深綠泡泡中，引用姓名及摘要在各版本舊規則之後仍維持可讀。 */
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote .taleinn-table-quote-content strong,
.taleinn-story-page .taleinn-table-message.is-own .taleinn-table-quote .taleinn-table-quote-content .taleinn-table-quote-excerpt {
    color: #f3f1eb;
}
/* 短回覆也給引用內容合理空間；在 320px 手機版自動縮到可用寬度。 */
.taleinn-story-page .taleinn-table-message-bubble:has(> .taleinn-table-quote) {
    min-width: min(190px, 100%);
}