:root {
    --reader-map-bg: #111824;
    --reader-map-surface: #182130;
    --reader-map-soft: rgba(255, 255, 255, 0.055);
    --reader-map-line: rgba(210, 226, 242, 0.17);
    --reader-map-line-strong: rgba(210, 226, 242, 0.3);
    --reader-map-text: #f2f6fb;
    --reader-map-muted: #aebccc;
    --reader-map-primary: #ff8e3c;
    --reader-map-accent: #80d9ff;
    --reader-map-ready: #65d39b;
}

html[data-app-theme="light"] {
    --reader-map-bg: #ffffff;
    --reader-map-surface: #f4f6f8;
    --reader-map-soft: rgba(15, 23, 42, 0.045);
    --reader-map-line: rgba(15, 23, 42, 0.13);
    --reader-map-line-strong: rgba(15, 23, 42, 0.24);
    --reader-map-text: #172033;
    --reader-map-muted: #59667a;
    --reader-map-accent: #087ea4;
    --reader-map-ready: #16825d;
}

#btn-reader-map {
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 6px 10px;
    box-sizing: border-box;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    touch-action: manipulation;
}

#btn-reader-map svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

#btn-reader-map > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

#btn-reader-map[aria-expanded="true"] {
    border-color: rgba(128, 217, 255, 0.42);
    background: rgba(128, 217, 255, 0.1);
    color: var(--reader-map-accent);
}

.reader-world-map {
    position: fixed;
    top: max(76px, calc(env(safe-area-inset-top) + 64px));
    right: 16px;
    z-index: 920;
    width: min(372px, calc(100vw - 32px));
    max-height: min(72dvh, 720px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--reader-map-line-strong);
    border-radius: 8px;
    background: color-mix(in srgb, var(--reader-map-bg) 96%, transparent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    color: var(--reader-map-text);
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 180ms ease, transform 180ms ease;
    backdrop-filter: blur(14px);
}

.reader-world-map.is-open {
    opacity: 1;
    transform: translateX(0);
}

.reader-world-map__header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 9px 8px 14px;
    border-bottom: 1px solid var(--reader-map-line);
}

.reader-world-map__heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reader-world-map__heading-icon,
.reader-world-map__current-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 142, 60, 0.3);
    border-radius: 7px;
    background: rgba(255, 142, 60, 0.1);
    color: var(--reader-map-primary);
}

.reader-world-map__heading > span:last-child,
.reader-world-map__current > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.reader-world-map__heading small,
.reader-world-map__current small {
    overflow: hidden;
    color: var(--reader-map-muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-world-map__heading strong {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-world-map__icon-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--reader-map-muted);
    cursor: pointer;
    touch-action: manipulation;
}

.reader-world-map__icon-button:hover,
.reader-world-map__icon-button:focus-visible {
    border-color: var(--reader-map-line);
    background: var(--reader-map-soft);
    color: var(--reader-map-text);
}

.reader-world-map__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    scroll-padding-bottom: max(24px, env(safe-area-inset-bottom));
    scrollbar-width: thin;
    scrollbar-color: var(--reader-map-line-strong) transparent;
}

.reader-world-map__current {
    min-height: 62px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.reader-world-map__current-icon {
    border-color: rgba(128, 217, 255, 0.28);
    background: rgba(128, 217, 255, 0.08);
    color: var(--reader-map-accent);
}

.reader-world-map__current strong {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-world-map__current em {
    padding: 4px 7px;
    border: 1px solid rgba(101, 211, 155, 0.26);
    border-radius: 6px;
    background: rgba(101, 211, 155, 0.08);
    color: var(--reader-map-ready);
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
}

.reader-world-map__region-actions,
.reader-full-map__region-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

.reader-world-map__region-actions {
    padding: 0 14px 12px;
}

.reader-world-map__region-actions button,
.reader-full-map__region-actions button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(128, 217, 255, 0.28);
    border-radius: 7px;
    background: rgba(128, 217, 255, 0.08);
    color: var(--reader-map-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.reader-world-map__region-actions button:hover,
.reader-world-map__region-actions button:focus-visible,
.reader-full-map__region-actions button:hover,
.reader-full-map__region-actions button:focus-visible {
    border-color: var(--reader-map-accent);
    outline: none;
}

.reader-world-map__scene {
    position: relative;
    width: calc(100% - 28px);
    aspect-ratio: 3 / 2;
    margin: 0 14px;
    overflow: hidden;
    border: 1px solid var(--reader-map-line-strong);
    border-radius: 7px;
    background: #080d14;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.reader-world-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.reader-world-map__scene.is-ready .reader-world-map__canvas { opacity: 1; }
.reader-world-map__scene.is-dragging { cursor: grabbing; }
.reader-world-map__scene.is-recentering .reader-world-map__canvas { transition: transform 220ms ease-out; }

.reader-world-map__scene img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.reader-world-map__scene-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 24px;
    box-sizing: border-box;
    background:
        linear-gradient(135deg, rgba(128, 217, 255, 0.08), transparent 56%),
        var(--reader-map-surface);
    color: var(--reader-map-muted);
    text-align: center;
}

.reader-world-map__scene-placeholder span { color: var(--reader-map-accent); }
.reader-world-map__scene-placeholder strong { color: var(--reader-map-text); font-size: 13px; }
.reader-world-map__scene-placeholder small { max-width: 210px; font-size: 10px; line-height: 1.5; }

.reader-world-map__scene.is-world-scene img {
    object-position: center;
}

.reader-world-map__scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 36px rgba(4, 8, 13, 0.3);
}

.reader-world-map__markers {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.reader-world-map__marker {
    position: absolute;
    left: var(--marker-x);
    top: var(--marker-y);
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%) scale(var(--marker-inverse-scale, 1));
    transform-origin: center;
}

.reader-world-map__marker > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid var(--reader-map-accent);
    border-radius: 50%;
    background: #102432;
    color: #f4fbff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.42);
    font-size: 10px;
    font-weight: 800;
}

.reader-world-map__marker.is-player {
    z-index: 4;
}

.reader-world-map__marker.is-player > span {
    border-color: var(--reader-map-primary);
    background: #2a1911;
    color: #ffe2cb;
}

.reader-world-map__marker.is-character.is-highlighted > span {
    box-shadow: 0 0 0 5px rgba(128, 217, 255, 0.25), 0 5px 14px rgba(0, 0, 0, 0.42);
}

.reader-world-map__marker.is-ambient > span {
    animation: reader-map-ambient 12s ease-in-out var(--marker-delay) infinite alternate;
}

@keyframes reader-map-ambient {
    0%, 20% { transform: translate3d(-2px, 1px, 0); }
    55% { transform: translate3d(2px, -2px, 0); }
    100% { transform: translate3d(1px, 2px, 0); }
}

.reader-world-map__asset-state {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 4;
    max-width: calc(100% - 16px);
    padding: 5px 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(5, 9, 15, 0.78);
    color: #e9f2fa;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-world-map__recenter {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 6;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(128, 217, 255, 0.48);
    border-radius: 7px;
    background: rgba(13, 25, 36, 0.92);
    color: var(--reader-map-accent);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.36);
    cursor: pointer;
    touch-action: manipulation;
}

.reader-world-map__recenter[hidden] { display: none; }
.reader-world-map__recenter:hover,
.reader-world-map__recenter:focus-visible { background: #173247; }

.reader-world-map__scene.is-panned .reader-world-map__asset-state {
    max-width: calc(100% - 68px);
}

.reader-world-map__section {
    padding: 14px;
}

.reader-world-map__section-title {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.reader-world-map__section-title > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--reader-map-text);
    font-size: 12px;
    font-weight: 700;
}

.reader-world-map__section-title small {
    color: var(--reader-map-muted);
    font-size: 10px;
}

.reader-world-map__characters {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--reader-map-line-strong) transparent;
}

.reader-world-map__character {
    min-height: 52px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px 2px;
    border: 0;
    border-top: 1px solid var(--reader-map-line);
    background: transparent;
    color: var(--reader-map-text);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.reader-world-map__character:hover {
    background: var(--reader-map-soft);
}

.reader-world-map__avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(128, 217, 255, 0.3);
    border-radius: 50%;
    background: rgba(128, 217, 255, 0.08);
    color: var(--reader-map-accent);
    font-size: 11px;
    font-weight: 800;
}

.reader-world-map__character > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reader-world-map__character strong,
.reader-world-map__character small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-world-map__character strong {
    font-size: 12px;
}

.reader-world-map__character small,
.reader-world-map__character em {
    color: var(--reader-map-muted);
    font-size: 10px;
    font-style: normal;
}

.reader-world-map__character em {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-world-map__empty {
    margin: 4px 0 0;
    padding: 12px;
    border: 1px dashed var(--reader-map-line-strong);
    border-radius: 6px;
    color: var(--reader-map-muted);
    font-size: 11px;
    line-height: 1.6;
}

.reader-world-map__empty > span,
.reader-world-map__empty > strong,
.reader-world-map__empty > small {
    display: block;
}

.reader-world-map__empty > span {
    margin-bottom: 6px;
    color: var(--reader-map-accent);
}

.reader-world-map__empty > strong {
    color: var(--reader-map-text);
    font-size: 13px;
}

.reader-world-map__empty > small {
    margin-top: 3px;
}

.reader-world-map__empty > button {
    min-height: 40px;
    margin-top: 10px;
    padding: 0 12px;
    border: 1px solid var(--reader-map-line-strong);
    border-radius: 6px;
    background: rgba(255, 142, 60, 0.1);
    color: var(--reader-map-text);
    font: inherit;
    cursor: pointer;
}

.reader-world-map__full {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px 14px;
    padding: 0 13px;
    border: 1px solid rgba(255, 142, 60, 0.35);
    border-radius: 7px;
    background: rgba(255, 142, 60, 0.09);
    color: var(--reader-map-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

body.reader-full-map-open { overflow: hidden; }

.reader-full-map {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(4, 7, 12, 0.78);
    opacity: 0;
    transition: opacity 180ms ease;
}

.reader-full-map.is-open { opacity: 1; }

.reader-full-map__surface {
    width: min(1440px, 100%);
    height: min(900px, 100%);
    min-height: 0;
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--reader-map-line-strong);
    border-radius: 8px;
    background: var(--reader-map-bg);
    color: var(--reader-map-text);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
    transform: translateY(10px);
    transition: transform 180ms ease;
}

.reader-full-map.is-open .reader-full-map__surface { transform: translateY(0); }

.reader-full-map__header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 9px 7px 16px;
    border-bottom: 1px solid var(--reader-map-line);
}

.reader-full-map__header > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-full-map__actions { display: flex; align-items: center; gap: 8px; }

.reader-full-map__zoom-button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.reader-full-map__zoom-value {
    min-width: 42px;
    color: var(--reader-map-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.reader-full-map__actions [data-reader-full-labels] {
    min-width: 88px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--reader-map-line-strong);
    border-radius: 7px;
    background: var(--reader-map-soft);
    color: var(--reader-map-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.reader-full-map__actions [data-reader-full-labels]:hover,
.reader-full-map__actions [data-reader-full-labels]:focus-visible {
    border-color: var(--reader-map-accent);
    outline: none;
}

.reader-full-map__body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 12px;
    overflow: auto;
    padding: 12px;
    background: #080d14;
}

.reader-full-map__map-viewport {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.reader-full-map__map-viewport.is-dragging { cursor: grabbing; }

.reader-full-map__figure {
    position: relative;
    width: min(100%, calc((100dvh - 104px) * 1.5));
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    background: #0a1018;
}

.reader-full-map__figure > img { width: 100%; height: 100%; display: block; object-fit: contain; }

.reader-full-map__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.reader-full-map.labels-hidden .reader-full-map__labels { opacity: 0; }

.reader-full-map__label {
    position: absolute;
    left: var(--label-x);
    top: var(--label-y);
    max-width: 150px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    background: rgba(8, 13, 20, 0.82);
    color: #f7fbff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.reader-full-map__label.is-selected {
    border-color: var(--reader-map-accent);
    box-shadow: 0 0 0 2px rgba(128, 217, 255, 0.18);
}

.reader-full-map__label.is-current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-color: rgba(255, 142, 60, 0.84);
    background: rgba(78, 34, 12, 0.9);
    color: #ffe0c5;
    transform: translate(-50%, calc(-100% - 8px));
}

.reader-full-map__label.is-current svg { flex: 0 0 14px; }

.reader-full-map__details {
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--reader-map-line);
    border-radius: 7px;
    background: var(--reader-map-surface);
}

.reader-full-map__detail-heading {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.reader-full-map__detail-heading > span { width: 12px; height: 12px; border-radius: 50%; }
.reader-full-map__detail-heading > div { display: flex; flex-direction: column; gap: 2px; }
.reader-full-map__detail-heading small, .reader-full-map__group small { color: var(--reader-map-muted); line-height: 1.5; }
.reader-full-map__detail-heading strong { font-size: 18px; }
.reader-full-map__details > p { margin: 14px 0; line-height: 1.7; white-space: pre-wrap; }
.reader-full-map__group { margin: 12px 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--reader-map-line); border-radius: 6px; }
.reader-full-map__locations { margin-top: 16px; }
.reader-full-map__locations-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.reader-full-map__locations-title small { color: var(--reader-map-muted); }
.reader-full-map__location { border-top: 1px solid var(--reader-map-line); }
.reader-full-map__location summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; cursor: pointer; list-style: none; }
.reader-full-map__location summary::-webkit-details-marker { display: none; }
.reader-full-map__location summary::before { content: '+'; width: 18px; color: var(--reader-map-accent); font-size: 16px; }
.reader-full-map__location[open] summary::before { content: '−'; }
.reader-full-map__location summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-full-map__location summary small { flex: 0 0 auto; color: var(--reader-map-muted); }
.reader-full-map__location > p { margin: 0 0 12px 26px; color: var(--reader-map-muted); line-height: 1.6; white-space: pre-wrap; }
.reader-full-map__empty { height: 100%; display: grid; place-items: center; color: var(--reader-map-muted); text-align: center; }

.reader-world-map__full > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
}

.reader-world-map__full:hover,
.reader-world-map__full:focus-visible {
    border-color: rgba(255, 142, 60, 0.62);
    background: rgba(255, 142, 60, 0.15);
}

.reader-world-map button:focus-visible,
.reader-world-map a:focus-visible,
#btn-reader-map:focus-visible {
    outline: 2px solid var(--reader-map-accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    #btn-reader-map {
        position: relative !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 7px !important;
        border-color: transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        isolation: isolate;
    }

    #btn-reader-map::before {
        content: '';
        position: absolute;
        inset: 4px 0;
        border: 1px solid var(--reader-map-line-strong);
        border-radius: 7px;
        background: color-mix(in srgb, var(--panel) 92%, var(--reader-map-accent) 8%);
        pointer-events: none;
        z-index: -1;
    }

    #btn-reader-map[aria-expanded="true"]::before {
        border-color: rgba(128, 217, 255, 0.42);
        background: color-mix(in srgb, var(--panel) 84%, var(--reader-map-accent) 16%);
    }

    body.sandbox-app .input-actions,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .input-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 84px !important;
        gap: 4px !important;
    }

    body.sandbox-app .chat-input-bar .input-actions-trailing,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing {
        width: 84px !important;
        min-width: 84px !important;
        grid-template-columns: 40px 40px !important;
        grid-auto-flow: initial !important;
        grid-auto-columns: auto !important;
        gap: 4px !important;
    }

    body.sandbox-app .chat-input-bar #btn-reader-map,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar #btn-reader-map {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 7px !important;
    }

    .reader-world-map {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: min(76dvh, 680px);
        max-height: min(76dvh, 680px);
        border-width: 1px 0 0;
        border-radius: 8px 8px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        opacity: 1;
        transform: translateY(100%);
        transition: transform 200ms ease-out;
    }

    .reader-world-map.is-open {
        transform: translateY(0);
    }

    .reader-world-map::before {
        content: "";
        width: 38px;
        height: 4px;
        flex: 0 0 4px;
        align-self: center;
        margin-top: 7px;
        border-radius: 2px;
        background: var(--reader-map-line-strong);
    }

    .reader-world-map__header {
        min-height: 54px;
        padding-left: 16px;
        padding-right: 10px;
    }

    .reader-world-map__scene {
        width: calc(100% - 24px);
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 2;
        margin: 0 12px;
        touch-action: pan-y;
    }

    .reader-world-map__scene.is-world-scene img {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        object-fit: cover;
    }

    .reader-world-map__current,
    .reader-world-map__section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .reader-world-map__full {
        min-height: 52px;
        margin-left: 12px;
        margin-right: 12px;
        margin-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .reader-world-map__character {
        min-height: 56px;
    }

    /* Keep one vertical scroll surface on the mobile drawer. The outer body
       must be able to reveal the complete favorites section and footer action. */
    .reader-world-map__characters {
        max-height: none;
        overflow-y: visible;
        overscroll-behavior: auto;
    }

    .reader-full-map { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
    .reader-full-map__surface { width: 100%; height: 100%; grid-template-rows: 54px minmax(0, 1fr); }
    .reader-full-map__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 6px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
    .reader-full-map__map-viewport { height: auto; min-height: 220px; aspect-ratio: 3 / 2; }
    .reader-full-map__details { max-height: none; overflow: visible; padding: 12px; }
    .reader-full-map__actions { flex-wrap: wrap; justify-content: flex-end; }
    .reader-full-map__zoom-button { width: 36px; height: 36px; flex-basis: 36px; }
    .reader-full-map__zoom-value { min-width: 36px; }
    .reader-full-map__label { max-width: 112px; padding: 3px 5px; font-size: 9px; }
}

@media (max-width: 480px) {
    body.sandbox-app .input-actions,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .input-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 84px !important;
    }

    body.sandbox-app .chat-input-bar .input-actions-trailing,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing {
        width: 84px !important;
        min-width: 84px !important;
        grid-template-columns: 40px 40px !important;
    }

    body.sandbox-app .chat-input-bar #btn-reader-map,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar #btn-reader-map {
        width: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
    }

    .reader-full-map__header { padding-left: 11px; }
    .reader-full-map__actions { gap: 5px; }
    .reader-full-map__actions [data-reader-full-labels] { min-width: 76px; min-height: 40px; padding: 0 9px; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .reader-world-map {
        left: auto;
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        width: min(360px, 48vw);
        height: auto;
        max-height: calc(100dvh - 16px);
        border: 1px solid var(--reader-map-line-strong);
        border-radius: 8px;
        padding-bottom: 0;
        transform: translateX(110%);
    }

    .reader-world-map.is-open {
        transform: translateX(0);
    }

    .reader-world-map::before {
        display: none;
    }

    .reader-world-map__scene {
        min-height: 0;
        height: auto;
        aspect-ratio: 2.4 / 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reader-world-map,
    .reader-world-map__canvas,
    .reader-world-map__marker.is-ambient > span,
    .reader-full-map,
    .reader-full-map__surface,
    .reader-full-map__labels {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mobile reader actions share one grid so every visible control has equal spacing. */
@media (max-width: 768px) {
    body.sandbox-app .chat-input-bar .input-actions,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.sandbox-app .chat-input-bar .input-actions-trailing,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing {
        display: contents !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.sandbox-app .chat-input-bar .input-actions-trailing .font-size-area,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing .font-size-area {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    body.sandbox-app .chat-input-bar .input-actions > .btn-ghost,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions > .btn-ghost,
    body.sandbox-app .chat-input-bar .input-actions-trailing .btn-ghost,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing .btn-ghost,
    body.sandbox-app .chat-input-bar .input-actions-trailing #btn-font-size,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing #btn-font-size,
    body.sandbox-app .chat-input-bar #btn-reader-map,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar #btn-reader-map {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        justify-self: stretch !important;
        align-self: center !important;
    }

    /* Keep a 44px hit target while tightening the visible frame around its label. */
    body.sandbox-app .chat-input-bar .input-actions > .btn-ghost,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions > .btn-ghost,
    body.sandbox-app .chat-input-bar .input-actions-trailing .btn-ghost,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing .btn-ghost {
        position: relative !important;
        isolation: isolate;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.sandbox-app .chat-input-bar .input-actions > .btn-ghost::before,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions > .btn-ghost::before,
    body.sandbox-app .chat-input-bar .input-actions-trailing .btn-ghost::before,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar .input-actions-trailing .btn-ghost::before {
        content: '' !important;
        position: absolute !important;
        inset: 10px 0 !important;
        border: 1px solid color-mix(in srgb, currentColor 24%, var(--border)) !important;
        border-radius: 6px !important;
        background: color-mix(in srgb, var(--panel) 90%, currentColor 10%) !important;
        pointer-events: none !important;
        z-index: 0;
    }

    body.sandbox-app .chat-input-bar #btn-reader-map::before,
    body.sandbox-app.sandbox-chat-active .sandbox-input-mount .chat-input-bar #btn-reader-map::before {
        inset: 10px 0 !important;
        border-color: var(--reader-map-line-strong) !important;
        background: color-mix(in srgb, var(--panel) 92%, var(--reader-map-accent) 8%) !important;
        z-index: -1;
    }
}

/* ── 附近地点标记（20260823-location-labels-v1）──
   小圆点层级低于玩家/角色标记；地点名称常驻显示，方便直接读图。 */
.reader-world-map__marker.is-location {
    width: 16px;
    height: 16px;
    z-index: 2;
    cursor: pointer;
}

.reader-world-map__marker.is-location > i {
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--marker-region, #80d9ff);
    border-radius: 50%;
    background: rgba(8, 13, 20, 0.6);
    transition: transform 160ms ease-out, background 160ms ease-out;
}

.reader-world-map__marker.is-location:hover > i,
.reader-world-map__marker.is-location:focus-visible > i {
    transform: scale(1.35);
    background: rgba(16, 36, 50, 0.9);
}

.reader-world-map__marker.is-location.is-current > i {
    border-color: var(--reader-map-primary);
    background: var(--reader-map-primary);
    box-shadow: 0 0 0 4px rgba(255, 142, 60, 0.22);
}

.reader-world-map__marker.is-location.is-highlighted > i {
    border-color: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}

.reader-world-map__marker.is-location > span.marker-name {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    transform-origin: bottom center;
    display: block;
    width: max-content;
    max-width: min(180px, 30vw);
    height: auto;
    min-height: 0;
    padding: 3px 8px;
    border: 1px solid var(--reader-map-line-strong);
    border-radius: 5px;
    background: rgba(8, 13, 20, 0.92);
    color: var(--reader-map-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: none;
    transition: opacity 160ms ease-out;
}

.reader-world-map__marker.is-location:hover > span.marker-name,
.reader-world-map__marker.is-location.is-highlighted > span.marker-name {
    opacity: 1;
}

.reader-world-map__marker.is-location:not(.is-leaving) {
    animation: reader-map-location-in 260ms ease-out;
}

.reader-world-map__marker.is-location.is-leaving {
    opacity: 0;
    transition: opacity 260ms ease-in;
    pointer-events: none;
}

@keyframes reader-map-location-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reader-world-map__scene.is-zoomed { cursor: zoom-out; }
.reader-world-map__scene:not(.is-zoomed) { cursor: grab; }
.reader-world-map__scene.is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    .reader-world-map__marker.is-location:not(.is-leaving) { animation: none; }
    .reader-world-map__marker.is-location.is-leaving { transition: none; opacity: 0; }
}