/* Mobile-only short-video inspired skin for the shared novel workspace. */

html.novel-douyin {
    --novel-pink: #fe2c55;
    --novel-pink-strong: #e61d48;
    --novel-pink-soft: #fff0f4;
    --novel-cyan: #25f4ee;
    --novel-page: #f6f7f9;
    --novel-surface: #ffffff;
    --novel-ink: #1f2329;
    --novel-muted: #737a87;
    --novel-line: #e8eaee;
    --novel-sidebar-width: min(88vw, 23rem);
    --novel-host-top: 3.25rem;
    --novel-host-bottom: 2.875rem;
}

@media (max-width: 767px) {
    html.novel-douyin,
    html.novel-douyin body,
    html.novel-douyin #app {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        background: var(--novel-page) !important;
        color: var(--novel-ink) !important;
    }

    html.novel-douyin body {
        overflow: hidden !important;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0;
    }

    html.novel-douyin #app {
        display: block !important;
        overflow: hidden !important;
    }

    html.novel-douyin ::selection {
        background: var(--novel-pink-soft);
        color: var(--novel-ink);
    }

    html.novel-douyin ::-webkit-scrollbar-thumb {
        background: #cdd1d8;
    }

    /* Header and mobile workspace navigation. */
    html.novel-douyin #app > div[class*="md:hidden"][class*="top-0"] {
        height: calc(3.5rem + var(--rphub-inset-top, env(safe-area-inset-top, 0px))) !important;
        padding-top: var(--rphub-inset-top, env(safe-area-inset-top, 0px)) !important;
        background: var(--novel-surface) !important;
        border-color: var(--novel-line) !important;
        box-shadow: 0 1px 0 rgba(31, 35, 41, 0.04) !important;
    }

    html.novel-douyin #app > div[class*="md:hidden"][class*="top-0"] h1 {
        color: var(--novel-ink) !important;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    /* Keep status messages clear of the host title bar and the novel tabs. */
    html.novel-douyin #app > div.fixed[class~="top-5"] {
        top: calc(6.75rem + var(--rphub-inset-top, env(safe-area-inset-top, 0px))) !important;
    }

    html.novel-douyin aside {
        top: var(--novel-host-top) !important;
        bottom: var(--novel-host-bottom) !important;
        height: auto !important;
        width: min(88vw, 23rem) !important;
        background: var(--novel-surface) !important;
        border-color: var(--novel-line) !important;
        border-radius: 0 12px 12px 0 !important;
        box-shadow: 14px 0 34px rgba(31, 35, 41, 0.16) !important;
        overflow: visible !important;
    }

    /* The edge handle remains available below the parent H5 title bar. */
    html.novel-douyin .novel-mobile-sidebar-handle {
        position: fixed;
        top: 50%;
        left: 0;
        z-index: 55;
        width: 38px;
        height: 82px;
        display: grid;
        place-items: center;
        padding: 0;
        color: var(--novel-pink-strong);
        background: var(--novel-surface);
        border: 1px solid rgba(254, 44, 85, 0.32);
        border-left: 0;
        border-radius: 0 14px 14px 0;
        box-shadow: 5px 8px 20px rgba(31, 35, 41, 0.14);
        transform: translateY(-50%);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, color 0.2s ease;
    }

    html.novel-douyin .novel-mobile-sidebar-handle::before {
        content: '';
        position: absolute;
        top: 14px;
        bottom: 14px;
        left: 0;
        width: 3px;
        border-radius: 999px;
        background: var(--novel-cyan);
    }

    html.novel-douyin .novel-mobile-sidebar-handle svg {
        width: 22px;
        height: 22px;
    }

    /* Keep the collapsed drawer control fully inside the host viewport. */
    html.novel-douyin .novel-mobile-sidebar-open-handle {
        left: calc(0.25rem + env(safe-area-inset-left, 0px));
        border-left: 1px solid rgba(254, 44, 85, 0.32);
        border-radius: 14px;
    }

    /* The close control belongs to the drawer, so it follows its real edge. */
    html.novel-douyin .novel-mobile-sidebar-edge-close {
        left: auto !important;
        right: -38px;
        color: var(--novel-ink);
        background: var(--novel-pink-soft);
        border-left: 0;
        border-radius: 0 14px 14px 0;
    }

    html.novel-douyin .novel-mobile-sidebar-close {
        display: none !important;
    }

    html.novel-douyin aside [class*="bg-[#e8e8e3]"],
    html.novel-douyin aside [class*="bg-[#e0e0db]"],
    html.novel-douyin aside [class*="bg-[#e4e4df]"] {
        background: var(--novel-surface) !important;
        border-color: var(--novel-line) !important;
    }

    html.novel-douyin .tab-slider {
        height: 3px !important;
        background: var(--novel-pink) !important;
        border-radius: 999px !important;
    }

    html.novel-douyin aside button[class*="text-stone-800"],
    html.novel-douyin aside button[class*="text-stone-600"] {
        color: var(--novel-ink) !important;
    }

    /* The desktop reading area becomes a single full-width mobile canvas. */
    html.novel-douyin main {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        padding-top: calc(3.5rem + var(--rphub-inset-top, env(safe-area-inset-top, 0px))) !important;
        padding-bottom: 0 !important;
    }

    html.novel-douyin main > div {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        padding: 1.25rem 0.75rem calc(10rem + var(--rphub-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
    }

    html.novel-douyin main > div > div:first-child {
        margin: 0.25rem 0 1.5rem !important;
    }

    html.novel-douyin main h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem !important;
        overflow-wrap: anywhere;
    }

    html.novel-douyin main .space-y-6 {
        padding-bottom: 1rem !important;
    }

    html.novel-douyin main .chapter-accordion {
        max-width: 100%;
    }

    html.novel-douyin main .prose {
        font-size: 0.975rem !important;
    }

    html.novel-douyin main .prose p {
        text-indent: 1.4em;
        line-height: 1.9;
        overflow-wrap: anywhere;
    }

    html.novel-douyin main > div > div.sticky {
        position: sticky !important;
        bottom: calc(0.5rem + var(--rphub-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
        margin: 0 !important;
        padding-top: 0.75rem;
    }

    html.novel-douyin main > div > div.sticky > div {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        padding: 0.625rem !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 28px rgba(31, 35, 41, 0.14) !important;
    }

    html.novel-douyin main > div > div.sticky textarea {
        min-height: 4.75rem !important;
        font-size: 16px !important;
    }

    html.novel-douyin main > div > div.sticky .flex.flex-col.md\:flex-row {
        align-items: stretch !important;
        gap: 0.625rem !important;
    }

    html.novel-douyin main > div > div.sticky .flex.items-center {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: space-between !important;
    }

    html.novel-douyin main > div > div.sticky button[class*="w-full"] {
        min-height: 2.75rem;
        font-size: 0.9375rem;
    }

    /* Reading surface, cards and dialogs. */
    html.novel-douyin [class*="bg-[#f5f5f0]"],
    html.novel-douyin [class*="bg-stone-50"],
    html.novel-douyin [class*="bg-stone-100"] {
        background-color: var(--novel-page) !important;
    }

    html.novel-douyin [class*="bg-white"] {
        background-color: var(--novel-surface) !important;
    }

    html.novel-douyin [class*="border-stone-"],
    html.novel-douyin [class*="border-[#d4d4ce]"] {
        border-color: var(--novel-line) !important;
    }

    html.novel-douyin [class*="text-stone-800"],
    html.novel-douyin [class*="text-stone-700"] {
        color: var(--novel-ink) !important;
    }

    html.novel-douyin [class*="text-stone-600"],
    html.novel-douyin [class*="text-stone-500"],
    html.novel-douyin [class*="text-stone-400"] {
        color: var(--novel-muted) !important;
    }

    html.novel-douyin .prose p {
        line-height: 1.92;
    }

    /* Command controls use the short-video pink/cyan accent pair. */
    html.novel-douyin [class*="bg-stone-800"],
    html.novel-douyin [class*="bg-stone-700"] {
        background-color: var(--novel-pink) !important;
    }

    html.novel-douyin [class*="hover:bg-stone-700"]:hover,
    html.novel-douyin [class*="hover:bg-stone-800"]:hover {
        background-color: var(--novel-pink-strong) !important;
    }

    html.novel-douyin button:focus-visible,
    html.novel-douyin input:focus,
    html.novel-douyin textarea:focus,
    html.novel-douyin select:focus {
        outline: none !important;
        border-color: var(--novel-pink) !important;
        box-shadow: 0 0 0 3px rgba(254, 44, 85, 0.12) !important;
    }

    html.novel-douyin [class*="bg-primary"],
    html.novel-douyin [class*="text-primary"] {
        color: var(--novel-pink-strong) !important;
    }

    html.novel-douyin [class*="bg-primary"] {
        background-color: var(--novel-pink) !important;
        color: #fff !important;
    }

    html.novel-douyin [class*="bg-red-700"] {
        background-color: #e5484d !important;
    }

    html.novel-douyin .fixed[class*="top-20"] {
        top: calc(4.25rem + var(--rphub-inset-top, env(safe-area-inset-top, 0px))) !important;
        right: 0.75rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        background: var(--novel-pink) !important;
        border: 2px solid var(--novel-cyan) !important;
        box-shadow: 0 10px 24px rgba(254, 44, 85, 0.24) !important;
    }

    html.novel-douyin .novel-mobile-scroll-controls {
        right: 0.75rem !important;
        top: 50%;
        bottom: auto !important;
        gap: 0.5rem !important;
        transform: translateY(-50%);
    }

    /* Dialog bodies stay usable on a short phone viewport instead of compressing. */
    html.novel-douyin [class*="h-[90vh]"],
    html.novel-douyin [class*="h-[92vh]"] {
        height: calc(100dvh - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 12px !important;
    }

    html.novel-douyin [class*="z-[50]"] > [class*="overflow-hidden"],
    html.novel-douyin [class*="z-[80]"] > [class*="overflow-hidden"] {
        max-height: calc(100dvh - 1rem) !important;
    }

    /* Review is a mobile page, not a desktop-centered dialog. */
    html.novel-douyin #app > .novel-review-backdrop,
    html.novel-douyin #app > .novel-review-dialog-shell {
        top: var(--novel-host-top) !important;
        bottom: var(--novel-host-bottom) !important;
    }

    html.novel-douyin #app > div.fixed.inset-0[class~="z-50"],
    html.novel-douyin #app > div.fixed.inset-0[class~="z-[60]"],
    html.novel-douyin #app > div.fixed.inset-0[class~="z-[70]"] {
        top: var(--novel-host-top) !important;
        bottom: var(--novel-host-bottom) !important;
    }

    html.novel-douyin #app > div.fixed.inset-0[class~="z-50"] > [class*="h-[90vh]"] {
        height: 100% !important;
        max-height: 100% !important;
    }

    html.novel-douyin #app > .novel-review-dialog-shell {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }

    html.novel-douyin #app > .novel-review-dialog-shell > .novel-review-dialog {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html.novel-douyin .novel-model-library {
        min-height: 0;
    }

    html.novel-douyin .novel-model-refresh {
        border: 1px solid var(--novel-line);
        border-radius: 8px;
        background: var(--novel-surface);
    }

    html.novel-douyin .novel-model-groups {
        padding-right: 0.125rem;
    }

    html.novel-douyin .novel-model-group {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--novel-line);
        border-radius: 8px;
        padding: 0.75rem;
        background: var(--novel-surface);
    }

    html.novel-douyin .novel-model-group::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
    }

    html.novel-douyin .novel-model-group--per-use::before,
    html.novel-douyin .novel-model-group--per-use .novel-model-group-badge {
        background: var(--novel-pink);
    }

    html.novel-douyin .novel-model-group--token::before,
    html.novel-douyin .novel-model-group--token .novel-model-group-badge {
        background: #168f8a;
    }

    html.novel-douyin .novel-model-group--custom::before,
    html.novel-douyin .novel-model-group--custom .novel-model-group-badge {
        background: #c57a13;
    }

    html.novel-douyin .novel-model-group-badge {
        display: grid;
        width: 1.35rem;
        height: 1.35rem;
        place-items: center;
        border-radius: 5px;
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 800;
    }

    html.novel-douyin .novel-model-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border: 1px solid var(--novel-line);
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        color: var(--novel-muted);
        transition: border-color 0.16s ease, background 0.16s ease;
    }

    html.novel-douyin .novel-model-card.is-selected {
        border-color: var(--novel-pink);
        background: var(--novel-pink-soft);
        color: var(--novel-pink-strong);
    }

    html.novel-douyin .novel-model-group--token .novel-model-card.is-selected {
        border-color: #168f8a;
        background: #eefcfb;
        color: #168f8a;
    }

    html.novel-douyin .novel-model-group--custom .novel-model-card.is-selected {
        border-color: #c57a13;
        background: #fff8e8;
        color: #9a5b06;
    }

    html.novel-douyin .novel-current-model {
        border-top: 1px solid var(--novel-line);
        padding-top: 0.75rem;
        color: var(--novel-pink-strong);
    }

    html.novel-douyin [class*="p-6"][class*="overflow-hidden"] {
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        padding: 1rem !important;
    }
}

/* Some H5 webviews report a tablet-sized width. Keep their novel drawer
   controllable instead of falling back to the desktop-fixed sidebar. */
@media (min-width: 768px) and (max-width: 1100px) {
    html.novel-douyin {
        --novel-sidebar-width: 24rem;
    }

    html.novel-douyin body,
    html.novel-douyin #app {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    html.novel-douyin #app {
        display: block !important;
        background: var(--novel-page) !important;
    }

    html.novel-douyin aside {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: var(--novel-sidebar-width) !important;
        height: 100dvh !important;
        background: var(--novel-surface) !important;
        border-color: var(--novel-line) !important;
        border-radius: 0 !important;
        box-shadow: 14px 0 34px rgba(31, 35, 41, 0.16) !important;
        overflow: visible !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 50 !important;
    }

    html.novel-douyin #app.novel-sidebar-open aside {
        transform: translateX(0) !important;
    }

    html.novel-douyin main {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html.novel-douyin #app.novel-sidebar-open main {
        width: calc(100% - var(--novel-sidebar-width)) !important;
        margin-left: var(--novel-sidebar-width) !important;
    }

    html.novel-douyin .novel-mobile-sidebar-handle {
        position: fixed;
        top: 50%;
        left: 0;
        z-index: 55;
        width: 42px;
        height: 88px;
        display: grid !important;
        place-items: center;
        padding: 0;
        color: var(--novel-pink-strong);
        background: var(--novel-surface);
        border: 1px solid rgba(254, 44, 85, 0.32);
        border-left: 0;
        border-radius: 0 14px 14px 0;
        box-shadow: 5px 8px 20px rgba(31, 35, 41, 0.14);
        transform: translateY(-50%);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, color 0.2s ease;
    }

    html.novel-douyin .novel-mobile-sidebar-handle::before {
        content: '';
        position: absolute;
        top: 15px;
        bottom: 15px;
        left: 0;
        width: 3px;
        border-radius: 999px;
        background: var(--novel-cyan);
    }

    html.novel-douyin .novel-mobile-sidebar-handle svg {
        width: 22px;
        height: 22px;
    }

    html.novel-douyin .novel-mobile-sidebar-edge-close {
        left: auto !important;
        right: -42px;
        color: var(--novel-ink);
        background: var(--novel-pink-soft);
        border-left: 0;
        border-radius: 0 14px 14px 0;
    }

    html.novel-douyin .novel-mobile-sidebar-close {
        display: none !important;
    }
}