/* ==========================================================================
           [SEC:CSS:WORKSHOP]
           CHARACTER WORKSHOP
           The full-screen place to build a character section by section
           (js/controllers/workshop.js). Styled here because css/tailwind.css is prebuilt.
           It sits above the character editor (60) and below pickers and confirmations (70).
           ========================================================================== */

        #character-workshop {
            position: fixed;
            inset: 0;
            z-index: 65;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            background: #0e131b;
            color: var(--text-primary);
            font-family: var(--font-primary);
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        }

        #character-workshop.hidden {
            display: none;
        }

        /* --- Header --------------------------------------------------------------- */

        .ws-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(17, 24, 39, 0.85);
        }

        .ws-icon-btn {
            flex-shrink: 0;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.6rem;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.05);
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .ws-icon-btn:hover {
            background: rgba(20, 184, 166, 0.2);
            color: #fff;
        }

        .ws-heading {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        .ws-kicker {
            font-size: 0.65rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-accent);
            font-weight: 700;
        }

        .ws-name {
            width: 100%;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 0.4rem;
            padding: 0.1rem 0.25rem;
            margin-left: -0.25rem;
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
        }

        .ws-name:focus {
            outline: none;
            border-color: rgba(20, 184, 166, 0.5);
            background: rgba(0, 0, 0, 0.25);
        }

        .ws-variant {
            flex-shrink: 0;
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
            border: 1px solid rgba(20, 184, 166, 0.45);
            color: #5eead4;
            max-width: 9rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* --- A chat's own persona hides changes there ------------------------------ */

        .ws-notice {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
            margin: 0.75rem 1rem 0;
            padding: 0.65rem 0.85rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(245, 158, 11, 0.45);
            background: rgba(245, 158, 11, 0.1);
            color: #fde68a;
            font-size: 0.85rem;
            line-height: 1.45;
        }

        .ws-notice span {
            flex: 1 1 16rem;
        }

        .ws-btn {
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            font-size: 0.8rem;
            font-weight: 600;
            transition: background var(--transition-fast);
        }

        .ws-btn:hover {
            background: rgba(20, 184, 166, 0.35);
        }

        /* --- Tabs (phone) and panes ------------------------------------------------ */

        .ws-tabs {
            display: none;
            gap: 0.25rem;
            padding: 0.5rem 1rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .ws-tab {
            padding: 0.55rem 0.9rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
        }

        .ws-tab.is-active {
            color: #fff;
            border-bottom-color: var(--text-accent);
        }

        .ws-body {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        }

        .ws-pane {
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 1rem;
        }

        /* Wide: Sections on the left; the right column shows the co-writer or the card. */
        .ws-side {
            min-height: 0;
            display: flex;
            flex-direction: column;
            border-left: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(0, 0, 0, 0.15);
        }

        .ws-side-tabs {
            display: flex;
            gap: 0.25rem;
            padding: 0.4rem 1rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .ws-side > .ws-pane {
            flex: 1;
        }

        @media (min-width: 761px) {
            body:not(.layout-vertical) .ws-side > .ws-pane:not(.is-side) {
                display: none;
            }
        }

        /* On a phone, or any narrow window: one pane at a time, picked with the tabs. */
        body.layout-vertical .ws-tabs {
            display: flex;
        }

        body.layout-vertical .ws-body {
            display: block;
        }

        body.layout-vertical .ws-pane {
            display: none;
            height: 100%;
        }

        body.layout-vertical .ws-pane.is-active {
            display: block;
        }

        body.layout-vertical .ws-side {
            display: contents;
        }

        body.layout-vertical .ws-side-tabs {
            display: none;
        }

        @media (max-width: 760px) {
            .ws-tabs {
                display: flex;
            }

            .ws-body {
                display: block;
            }

            .ws-pane {
                display: none;
                height: 100%;
            }

            .ws-pane.is-active {
                display: block;
            }

            .ws-side {
                display: contents;
            }

            .ws-side-tabs {
                display: none;
            }
        }

        /* --- Cards ----------------------------------------------------------------- */

        .ws-card {
            margin: 0 auto 0.85rem;
            max-width: 46rem;
            padding: 0.85rem 1rem 1rem;
            border-radius: 0.85rem;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(31, 41, 55, 0.55);
        }

        .ws-concept {
            border-color: rgba(20, 184, 166, 0.35);
        }

        .ws-unsorted {
            border-color: rgba(245, 158, 11, 0.35);
        }

        .ws-label {
            display: block;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-accent);
        }

        .ws-hint {
            margin: 0.2rem 0 0.6rem;
            font-size: 0.78rem;
            line-height: 1.4;
            color: #8b98a9;
        }

        .ws-field {
            display: block;
            width: 100%;
            min-height: 3rem;
            resize: none;
            overflow: hidden;
            /* Grows with its text, and re-fits when the screen turns or a hidden tab is shown. */
            field-sizing: content;
            padding: 0.6rem 0.75rem;
            border-radius: 0.6rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.3);
            color: var(--text-primary);
            /* 16px stops a phone zooming in when the field takes focus. */
            font-size: 16px;
            line-height: 1.55;
            font-family: var(--chat-font-family);
        }

        .ws-field:focus {
            outline: none;
            border-color: rgba(20, 184, 166, 0.6);
        }

        /* --- Sections -------------------------------------------------------------- */

        .ws-section.is-locked {
            border-color: rgba(148, 163, 184, 0.35);
        }

        .ws-section-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem 0.6rem;
            margin-bottom: 0.55rem;
        }

        .ws-section-title {
            flex: 1 1 auto;
            min-width: 8rem;
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
        }

        .ws-tally {
            font-size: 0.72rem;
            color: #5eead4;
        }

        .ws-tally.is-short {
            color: #fbbf24;
        }

        .ws-length {
            display: inline-flex;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .ws-length-btn {
            min-width: 2rem;
            height: 2rem;
            font-size: 0.72rem;
            font-weight: 700;
            color: #8b98a9;
            background: rgba(0, 0, 0, 0.2);
        }

        .ws-length-btn + .ws-length-btn {
            border-left: 1px solid rgba(255, 255, 255, 0.08);
        }

        .ws-length-btn.is-on {
            color: #fff;
            background: rgba(20, 184, 166, 0.35);
        }

        .ws-lock {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            color: #8b98a9;
            background: rgba(0, 0, 0, 0.2);
        }

        .ws-lock.is-on {
            color: #fff;
            background: rgba(148, 163, 184, 0.35);
        }

        /* --- Pins: kept, suggested, and kept but not in the text yet ----------------- */

        .ws-pins {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-bottom: 0.6rem;
        }

        .ws-pin {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            border-radius: 999px;
            font-size: 0.8rem;
            line-height: 1.2;
        }

        .ws-pin-text {
            padding: 0.35rem 0.15rem 0.35rem 0.7rem;
            overflow-wrap: anywhere;
        }

        .ws-pin.is-kept {
            background: rgba(20, 184, 166, 0.18);
            border: 1px solid rgba(20, 184, 166, 0.6);
            color: #ccfbf1;
        }

        .ws-pin.is-suggested {
            border: 1px dashed rgba(148, 163, 184, 0.7);
            color: #cbd5e1;
        }

        .ws-pin.is-missing {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.7);
            color: #fde68a;
        }

        .ws-pin-btn {
            flex-shrink: 0;
            min-width: 1.9rem;
            height: 1.9rem;
            border-radius: 999px;
            color: inherit;
            opacity: 0.75;
            font-size: 0.95rem;
        }

        .ws-pin-btn:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
        }

        .ws-pin.is-suggested .ws-pin-btn:first-child + .ws-pin-text {
            padding-left: 0.1rem;
        }

        .ws-pin-add {
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            border: 1px dashed rgba(20, 184, 166, 0.5);
            color: #5eead4;
            font-size: 0.8rem;
        }

        .ws-pin-input {
            flex: 1 1 14rem;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            border: 1px solid rgba(20, 184, 166, 0.6);
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            font-size: 16px;
        }

        .ws-pin-input:focus {
            outline: none;
        }

        /* A pin being reworded: the whole pin on show, as many lines as it needs. */
        textarea.ws-pin-input {
            flex-basis: 100%;
            border-radius: 0.9rem;
            line-height: 1.35;
            resize: none;
            field-sizing: content;
        }

        button.ws-pin-text {
            text-align: left;
        }

        /* --- Section text, with each pin that made it in highlighted ------------------ */

        .ws-text {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            line-height: 1.6;
            font-family: var(--chat-font-family);
            color: var(--text-primary);
            padding: 0.6rem 0.75rem;
            border-radius: 0.6rem;
            border: 1px solid transparent;
            background: rgba(0, 0, 0, 0.18);
            cursor: text;
        }

        .ws-text:hover,
        .ws-text:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.12);
        }

        .ws-text.is-empty {
            color: #6b7785;
            font-style: italic;
        }

        .ws-mark {
            color: inherit;
            background: rgba(20, 184, 166, 0.2);
            border-bottom: 1px solid rgba(45, 212, 191, 0.8);
            border-radius: 0.15rem;
        }

        /* --- The card as replies read it --------------------------------------------- */

        .ws-preview {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            font-size: 0.9rem;
            line-height: 1.55;
            color: var(--text-secondary);
            padding: 0.65rem 0.75rem;
            border-radius: 0.6rem;
            background: rgba(0, 0, 0, 0.25);
        }

        /* --- Writing with the AI: buttons, status, proposals and takes ------------------ */

        .ws-aibar,
        .ws-ai-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem 0.5rem;
        }

        .ws-aibar {
            max-width: 46rem;
            margin: 0 auto 0.85rem;
        }

        .ws-ai-row {
            margin-top: 0.6rem;
        }

        .ws-ai-btn {
            padding: 0.4rem 0.8rem;
            border-radius: 999px;
            border: 1px solid rgba(20, 184, 166, 0.55);
            background: rgba(20, 184, 166, 0.1);
            color: #99f6e4;
            font-size: 0.8rem;
            font-weight: 600;
            transition: background var(--transition-fast);
        }

        .ws-ai-btn:hover:not(:disabled) {
            background: rgba(20, 184, 166, 0.25);
        }

        .ws-ai-btn:disabled,
        .ws-btn:disabled,
        .ws-dial-btn:disabled {
            opacity: 0.45;
            cursor: default;
        }

        .ws-status {
            font-size: 0.78rem;
            color: #8b98a9;
        }

        .ws-status.is-error {
            color: #fca5a5;
        }

        /* What the AI is doing: a strip under the tabs, outside the scrolling panes, so it is always in view. */
        .ws-progress {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 1rem;
            border-bottom: 1px solid rgba(20, 184, 166, 0.35);
            background: rgba(20, 184, 166, 0.1);
            overflow: hidden;
        }

        .ws-progress.hidden {
            display: none;
        }

        .ws-progress-text {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        .ws-progress-what {
            font-size: 0.85rem;
            font-weight: 600;
            color: #ccfbf1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* A line that keeps moving, so it's plain the AI is at work even before any words arrive. */
        .ws-progress::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 35%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #2dd4bf, transparent);
            animation: ws-progress-slide 1.4s ease-in-out infinite;
        }

        @keyframes ws-progress-slide {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(300%);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .ws-progress::after {
                width: 100%;
                opacity: 0.5;
                animation: none;
            }
        }

        .ws-link {
            color: #5eead4;
            font-size: 0.78rem;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .ws-link.is-danger {
            color: #fca5a5;
        }

        .ws-btn.is-primary {
            background: rgba(20, 184, 166, 0.45);
        }

        .ws-btn.is-primary:hover {
            background: rgba(20, 184, 166, 0.65);
        }

        .ws-waiting {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            max-width: 46rem;
            margin: -0.35rem auto 0.85rem;
            padding: 0.55rem 0.8rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(20, 184, 166, 0.4);
            background: rgba(20, 184, 166, 0.08);
            font-size: 0.82rem;
        }

        .ws-waiting span {
            flex: 1 1 10rem;
        }

        .ws-proposal,
        .ws-takes {
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px dashed rgba(20, 184, 166, 0.45);
        }

        .ws-take + .ws-take {
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .ws-proposal-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.3rem 0.6rem;
            margin-bottom: 0.45rem;
            font-size: 0.78rem;
            color: #8b98a9;
        }

        .ws-proposal-head > span:first-child {
            flex: 1 1 12rem;
        }

        .ws-take-angle {
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
        }

        .ws-text.is-proposal {
            cursor: default;
            border-color: rgba(20, 184, 166, 0.25);
            background: rgba(20, 184, 166, 0.05);
        }

        .ws-proposal-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.55rem;
        }

        .ws-export-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.4rem;
        }

        .ws-select {
            flex: 1 1 12rem;
            min-width: 0;
            padding: 0.45rem 0.6rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            font-size: 16px;
        }

        .ws-select:focus {
            outline: none;
            border-color: rgba(20, 184, 166, 0.6);
        }

        .ws-dial-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem 0.6rem;
            margin-top: 0.85rem;
            font-size: 0.78rem;
            color: #8b98a9;
        }

        .ws-dial {
            display: inline-flex;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .ws-dial-btn {
            min-width: 2rem;
            height: 2rem;
            font-size: 0.75rem;
            font-weight: 700;
            color: #8b98a9;
            background: rgba(0, 0, 0, 0.2);
        }

        .ws-dial-btn + .ws-dial-btn {
            border-left: 1px solid rgba(255, 255, 255, 0.08);
        }

        .ws-dial-btn.is-on {
            color: #fff;
            background: rgba(20, 184, 166, 0.35);
        }

        /* --- The old card, sorted by the AI, waiting for a yes ---------------------------- */

        .ws-sort-review {
            border-color: rgba(20, 184, 166, 0.45);
        }

        .ws-sort-item {
            margin-top: 0.75rem;
        }

        .ws-sort-title {
            margin-bottom: 0.3rem;
            font-size: 0.8rem;
            font-weight: 700;
            color: #fff;
        }

        .ws-sort-pins {
            margin: 0.2rem 0;
            font-size: 0.82rem;
            line-height: 1.45;
            color: var(--text-secondary);
        }

        .ws-hint.is-warn {
            color: #fbbf24;
        }

        /* --- History and variants: a panel over the Workshop ------------------------------ */

        button.ws-variant {
            cursor: pointer;
            background: rgba(20, 184, 166, 0.08);
        }

        button.ws-variant:hover {
            background: rgba(20, 184, 166, 0.22);
        }

        .ws-history {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            width: min(30rem, 100%);
            display: flex;
            flex-direction: column;
            background: #111827;
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
        }

        .ws-history.hidden {
            display: none;
        }

        .ws-history-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .ws-history-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 1rem;
        }

        .ws-history-block + .ws-history-block {
            margin-top: 1.4rem;
        }

        .ws-variant-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.6rem;
            margin-top: 0.45rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(31, 41, 55, 0.55);
        }

        .ws-variant-row.is-active {
            border-color: rgba(20, 184, 166, 0.55);
        }

        .ws-variant-name {
            flex: 1 1 9rem;
            min-width: 0;
            padding: 0.35rem 0.5rem;
            border-radius: 0.45rem;
            border: 1px solid transparent;
            background: rgba(0, 0, 0, 0.25);
            color: #fff;
            font-size: 16px;
            font-weight: 600;
        }

        .ws-variant-name:focus {
            outline: none;
            border-color: rgba(20, 184, 166, 0.6);
        }

        .ws-variant-tag {
            font-size: 0.72rem;
            font-weight: 700;
            color: #5eead4;
        }

        .ws-commit {
            margin-top: 0.4rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(31, 41, 55, 0.45);
        }

        .ws-commit.is-open {
            border-color: rgba(20, 184, 166, 0.4);
        }

        .ws-commit-head {
            width: 100%;
            display: flex;
            align-items: baseline;
            gap: 0.6rem;
            padding: 0.6rem 0.75rem;
            text-align: left;
        }

        .ws-commit-who {
            flex-shrink: 0;
            min-width: 4.2rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #94a3b8;
        }

        .ws-commit-who.is-ai {
            color: #5eead4;
        }

        .ws-commit-who.is-restore {
            color: #fbbf24;
        }

        .ws-commit-summary {
            flex: 1;
            min-width: 0;
            font-size: 0.85rem;
            color: var(--text-primary);
            overflow-wrap: anywhere;
        }

        .ws-commit-when {
            flex-shrink: 0;
            font-size: 0.72rem;
            color: #6b7785;
        }

        .ws-commit-detail {
            padding: 0 0.75rem 0.75rem;
        }

        .ws-change + .ws-change {
            margin-top: 0.75rem;
        }

        .ws-ba {
            margin-top: 0.35rem;
        }

        .ws-ba-tag {
            display: inline-block;
            margin-bottom: 0.2rem;
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6b7785;
        }

        .ws-text.is-before {
            cursor: default;
            color: #94a3b8;
            text-decoration: line-through;
            text-decoration-color: rgba(148, 163, 184, 0.45);
        }

        /* --- Openings: how new chats start, and the example dialogue ------------------ */

        .ws-openings {
            border-color: rgba(20, 184, 166, 0.25);
        }

        .ws-opening {
            padding: 0.75rem 0;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }

        .ws-opening:first-of-type {
            border-top: none;
            padding-top: 0.35rem;
        }

        .ws-opening.is-new {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .ws-opening-head {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.4rem;
        }

        .ws-opening-name {
            max-width: 100%;
            padding: 0.15rem 0.3rem;
            margin-left: -0.3rem;
            border-radius: 0.4rem;
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
            text-align: left;
            overflow-wrap: anywhere;
        }

        .ws-opening-name:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .ws-opening-name-input {
            width: 100%;
            padding: 0.35rem 0.6rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(20, 184, 166, 0.6);
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            /* 16px stops a phone zooming in when the field takes focus. */
            font-size: 16px;
            font-weight: 600;
        }

        .ws-opening-name-input:focus {
            outline: none;
        }

        .ws-examples {
            margin-top: 0.9rem;
            padding-top: 0.8rem;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }

        .ws-sub {
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
        }

        .ws-examples .ws-notice {
            margin: 0 0 0.6rem;
        }

        /* --- The co-writer: a chat about the character, with the notebook beside it ----- */

        .ws-cowriter {
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        /* On a phone, or any narrow window, the co-writer is one of the tabs. */
        body.layout-vertical .ws-body .ws-cowriter.is-active {
            display: flex;
        }

        @media (max-width: 760px) {
            .ws-body .ws-pane:not(.is-active) {
                display: none;
            }

            .ws-body .ws-cowriter.is-active {
                display: flex;
            }
        }

        .ws-cw-head {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.55rem 0.75rem 0.55rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .ws-cw-title {
            flex: 1;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-weight: 700;
            color: #fff;
            text-align: left;
        }

        .ws-cw-title-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ws-cw-chip {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 600;
        }

        .ws-cw-chip:hover {
            border-color: rgba(20, 184, 166, 0.55);
            color: #fff;
        }

        .ws-cw-head .ws-icon-btn {
            width: 2.1rem;
            height: 2.1rem;
        }

        .ws-cw-log {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .ws-cw-reads {
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 0.7rem;
            background: rgba(0, 0, 0, 0.2);
            font-size: 0.78rem;
            color: #8b98a9;
        }

        .ws-cw-reads-toggle {
            width: 100%;
            padding: 0.5rem 0.75rem;
            color: var(--text-secondary);
            font-weight: 600;
            text-align: left;
        }

        .ws-cw-reads ul {
            margin: 0;
            padding: 0 0.75rem 0.6rem 2rem;
            list-style: disc;
        }

        .ws-cw-msg.is-you {
            align-self: flex-end;
            max-width: 85%;
            padding: 0.6rem 0.85rem;
            border-radius: 1rem 1rem 0.3rem 1rem;
            border: 1px solid rgba(20, 184, 166, 0.3);
            background: rgba(20, 184, 166, 0.16);
            color: #fff;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .ws-cw-msg.is-cowriter {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            min-width: 0;
        }

        /* Your message with its Edit and Delete under it. */
        .ws-cw-you {
            align-self: flex-end;
            max-width: 85%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.15rem;
        }

        .ws-cw-you .ws-cw-msg.is-you {
            max-width: 100%;
        }

        .ws-cw-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0 0.9rem;
            font-size: 0.78rem;
            color: #8b98a9;
        }

        .ws-cw-act {
            padding: 0.3rem 0;
            color: #8b98a9;
            font-weight: 600;
        }

        .ws-cw-act:hover:not(:disabled) {
            color: #5eead4;
        }

        .ws-cw-act:disabled,
        .ws-cw-ver:disabled {
            opacity: 0.4;
            cursor: default;
        }

        .ws-cw-actions.is-asking {
            padding: 0.2rem 0.7rem;
            border-radius: 0.6rem;
            border: 1px solid rgba(248, 113, 113, 0.3);
            background: rgba(248, 113, 113, 0.08);
            color: var(--text-secondary);
        }

        .ws-cw-act.is-danger {
            color: #fca5a5;
        }

        .ws-cw-act.is-danger:hover:not(:disabled) {
            color: #fecaca;
        }

        .ws-cw-versions {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-variant-numeric: tabular-nums;
        }

        .ws-cw-ver {
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-secondary);
            line-height: 1;
        }

        .ws-cw-ver:hover:not(:disabled) {
            border-color: rgba(20, 184, 166, 0.55);
            color: #fff;
        }

        .ws-cw-undo {
            margin: 0;
        }

        /* Change cards under a co-writer reply. */
        .ws-cw-cards {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .ws-cw-card {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            padding: 0.75rem 0.85rem;
            border-radius: 0.85rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(31, 41, 55, 0.55);
        }

        .ws-cw-card.is-used {
            border-color: rgba(20, 184, 166, 0.35);
            background: rgba(20, 184, 166, 0.06);
        }

        .ws-cw-card.is-turned-down {
            opacity: 0.6;
        }

        .ws-cw-card-head {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-accent);
        }

        .ws-cw-card-text {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            line-height: 1.55;
            color: var(--text-primary);
        }

        .ws-cw-card-text.is-writing {
            color: #8b98a9;
            font-style: italic;
        }

        .ws-cw-card-brief,
        .ws-cw-card-why {
            margin: 0;
            font-size: 0.8rem;
            line-height: 1.45;
            color: #8b98a9;
        }

        .ws-cw-card-brief {
            font-style: italic;
        }

        .ws-cw-card-pins {
            margin: 0;
            padding-left: 1rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .ws-cw-card-note {
            margin: 0;
            font-size: 0.8rem;
            line-height: 1.45;
            color: #fbbf24;
        }

        .ws-cw-card-foot {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
        }

        .ws-cw-card-foot .ws-cw-act {
            font-size: 0.8rem;
        }

        .ws-cw-card-tag {
            font-size: 0.75rem;
            font-weight: 700;
            color: #8b98a9;
        }

        .ws-cw-card-tag.is-used {
            color: #5eead4;
        }

        .ws-cw-card-edit {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .ws-cw-use-all {
            align-self: flex-start;
        }

        .ws-cw-cards-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
            font-size: 0.8rem;
            color: #8b98a9;
        }

        /* A dot on the Co-writer tab while cards wait. */
        .ws-tab.has-dot::after {
            content: '';
            display: inline-block;
            width: 0.45rem;
            height: 0.45rem;
            margin-left: 0.4rem;
            border-radius: 999px;
            background: #5eead4;
            vertical-align: 0.15em;
        }

        .ws-cw-who {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-accent);
        }

        .ws-cw-model {
            margin-left: 0.4rem;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
            color: #6b7785;
        }

        .ws-cw-say {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            line-height: 1.6;
            color: var(--text-primary);
        }

        .ws-cw-say.is-streaming::after {
            content: '';
            display: inline-block;
            width: 0.5em;
            height: 1.05em;
            margin-left: 1px;
            vertical-align: -0.15em;
            background: #5eead4;
            animation: ws-cw-blink 1s steps(1) infinite;
        }

        @keyframes ws-cw-blink {
            50% {
                opacity: 0;
            }
        }

        .ws-cw-ask {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            padding: 0.75rem;
            border-radius: 0.85rem;
            border: 1px solid rgba(20, 184, 166, 0.3);
            background: rgba(20, 184, 166, 0.08);
        }

        .ws-cw-ask-q {
            font-weight: 700;
            color: #fff;
        }

        .ws-cw-choice {
            padding: 0.6rem 0.8rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            font-size: 0.9rem;
            text-align: left;
        }

        .ws-cw-choice:hover:not(:disabled) {
            border-color: rgba(20, 184, 166, 0.55);
            background: rgba(20, 184, 166, 0.2);
        }

        .ws-cw-choice.is-picked {
            border-color: rgba(20, 184, 166, 0.55);
            background: rgba(20, 184, 166, 0.2);
            color: #fff;
        }

        .ws-cw-choice:disabled:not(.is-picked) {
            opacity: 0.5;
            cursor: default;
        }

        .ws-cw-other {
            display: flex;
            gap: 0.5rem;
        }

        .ws-cw-other-input {
            flex: 1;
            min-width: 0;
            padding: 0.5rem 0.75rem;
            border-radius: 0.6rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.3);
            color: var(--text-primary);
            /* 16px stops a phone zooming in when the field takes focus. */
            font-size: 16px;
        }

        .ws-cw-other-input:focus,
        .ws-cw-input:focus {
            outline: none;
            border-color: rgba(20, 184, 166, 0.6);
        }

        .ws-cw-unread {
            font-size: 0.78rem;
            color: #fbbf24;
        }

        .ws-cw-unread pre {
            margin-top: 0.3rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            background: rgba(0, 0, 0, 0.3);
            color: #cbd5e1;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .ws-cw-error {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
            font-size: 0.85rem;
            color: #fca5a5;
        }

        .ws-cw-starters {
            display: grid;
            gap: 0.5rem;
        }

        .ws-cw-starter {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
            padding: 0.75rem 0.9rem;
            border-radius: 0.8rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(31, 41, 55, 0.55);
            text-align: left;
        }

        .ws-cw-starter:hover:not(:disabled) {
            border-color: rgba(20, 184, 166, 0.55);
        }

        .ws-cw-starter strong {
            font-size: 0.92rem;
            color: #fff;
        }

        .ws-cw-starter span {
            font-size: 0.8rem;
            color: #8b98a9;
        }

        .ws-cw-compose {
            position: relative;
            display: flex;
            align-items: flex-end;
            gap: 0.5rem;
            padding: 0.6rem 0.75rem;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(17, 24, 39, 0.85);
        }

        .ws-cw-input {
            flex: 1;
            min-width: 0;
            min-height: 2.6rem;
            max-height: 9rem;
            resize: none;
            field-sizing: content;
            padding: 0.55rem 0.85rem;
            border-radius: 1.1rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.3);
            color: var(--text-primary);
            font-size: 16px;
            line-height: 1.4;
        }

        .ws-cw-round {
            width: 2.6rem;
            height: 2.6rem;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .ws-cw-round.is-spark {
            background: rgba(255, 255, 255, 0.06);
            color: #5eead4;
            font-size: 1rem;
        }

        .ws-cw-round.is-send {
            background: #0f766e;
            color: #fff;
        }

        .ws-cw-round.is-send:hover {
            background: #0d9488;
        }

        .ws-cw-menu {
            position: absolute;
            left: 0.75rem;
            right: 0.75rem;
            bottom: calc(100% + 0.4rem);
            z-index: 3;
            display: grid;
            gap: 0.4rem;
            padding: 0.5rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: #111827;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        }

        .ws-cw-menu.hidden {
            display: none;
        }

        /* The notebook, in the drawer the history uses. */
        .ws-cw-note {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            padding: 0.6rem 0.7rem;
            margin-top: 0.45rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(31, 41, 55, 0.55);
        }

        .ws-cw-note.is-editing {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-cw-note-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            color: var(--text-primary);
            text-align: left;
            overflow-wrap: anywhere;
        }

        .ws-cw-note-main .ws-hint {
            margin: 0;
        }

        .ws-cw-chat-meta {
            flex-basis: 100%;
            font-size: 0.72rem;
            color: #6b7785;
        }

        @media (prefers-reduced-motion: reduce) {
            .ws-cw-say.is-streaming::after {
                animation: none;
            }
        }