/* ============================================================================
   ChatLeg Studio — front-end design system
   Refined legal-tech workspace. Scoped under .cls-studio to avoid theme bleed.
   Brand: teal #3aa6b9. Type: Montserrat (loaded by the page/theme).
   Light + dark (dark keys off the wp-dark-mode plugin and prefers-color-scheme).
   ============================================================================ */

.cls-studio {
    /* Brand */
    --cls-brand:        #3aa6b9;
    --cls-brand-strong: #2d8a99;
    --cls-brand-deep:   #236b78;
    --cls-brand-soft:   rgba(58, 166, 185, 0.10);
    --cls-brand-ring:   rgba(58, 166, 185, 0.30);

    /* Surfaces & ink */
    --cls-bg:        #f4f7f8;
    --cls-surface:   #ffffff;
    --cls-surface-2: #f7fafb;
    --cls-surface-3: #eef3f5;
    --cls-ink:       #14232b;
    --cls-ink-soft:  #4a5b64;
    --cls-muted:     #7c8b93;
    --cls-border:    rgba(20, 35, 43, 0.10);
    --cls-border-2:  rgba(20, 35, 43, 0.06);

    /* Semantic */
    --cls-danger:    #d8484a;
    --cls-danger-soft: rgba(216, 72, 74, 0.10);
    --cls-success:   #1f9d6b;
    --cls-success-soft: rgba(31, 157, 107, 0.12);
    --cls-warn:      #d08a2c;

    /* Elevation */
    --cls-shadow-sm: 0 1px 2px rgba(20, 35, 43, 0.06);
    --cls-shadow:    0 4px 18px rgba(20, 35, 43, 0.08);
    --cls-shadow-lg: 0 18px 48px rgba(20, 35, 43, 0.14);

    /* Geometry */
    --cls-r-sm: 8px;
    --cls-r:    12px;
    --cls-r-lg: 18px;
    --cls-r-xl: 24px;

    /* Type */
    --cls-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cls-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, monospace;

    color: var(--cls-ink);
    font-family: var(--cls-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.cls-studio *,
.cls-studio *::before,
.cls-studio *::after { box-sizing: border-box; }

/* ---- Dark theme (wp-dark-mode plugin hooks + OS preference) --------------- */
.wp-dark-mode-active .cls-studio,
[data-wp-dark-mode-active] .cls-studio,
.cls-studio[data-theme="dark"] {
    --cls-bg:        #1b1f21;
    --cls-surface:   #23282a;
    --cls-surface-2: #282e30;
    --cls-surface-3: #2f3639;
    --cls-ink:       #eef3f5;
    --cls-ink-soft:  #c2cdd2;
    --cls-muted:     #8b989e;
    --cls-border:    rgba(233, 242, 247, 0.12);
    --cls-border-2:  rgba(233, 242, 247, 0.07);
    --cls-brand-soft: rgba(58, 166, 185, 0.16);
    --cls-danger-soft: rgba(216, 72, 74, 0.18);
    --cls-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cls-shadow:    0 4px 18px rgba(0, 0, 0, 0.35);
    --cls-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* ============================================================================
   Primitives
   ============================================================================ */
.cls-ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.cls-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--cls-brand-strong);
}

.cls-h {
    margin: 0; font-weight: 700; letter-spacing: -0.02em;
    color: var(--cls-ink); line-height: 1.15;
}
.cls-h--xl { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.035em; }
.cls-h--lg { font-size: 21px; }
.cls-h--md { font-size: 16px; }
.cls-sub { margin: 6px 0 0; color: var(--cls-muted); font-size: 14px; }

/* ---- Cards / modules ------------------------------------------------------ */
.cls-card {
    background: var(--cls-surface);
    border: 1px solid var(--cls-border);
    border-radius: var(--cls-r-lg);
    box-shadow: var(--cls-shadow);
}
.cls-card__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 20px 22px;
    border-bottom: 1px solid var(--cls-border-2);
}
.cls-card__title { display: flex; align-items: center; gap: 12px; }
.cls-card__title-ico {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: var(--cls-r);
    background: var(--cls-brand-soft); color: var(--cls-brand-strong);
}
.cls-card__body { padding: 22px; }
.cls-card__actions { display: flex; align-items: center; gap: 8px; }

/* ============================================================================
   Buttons
   ============================================================================ */
.cls-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 42px; padding: 0 18px;
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
    border: 1px solid transparent; border-radius: var(--cls-r);
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.cls-btn:active { transform: translateY(1px); }
.cls-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cls-brand-ring); }
.cls-btn .cls-ico { margin: -2px 0; }

.cls-btn--primary {
    background: linear-gradient(180deg, var(--cls-brand) 0%, var(--cls-brand-strong) 100%);
    color: #fff; box-shadow: 0 6px 16px rgba(58, 166, 185, 0.28);
}
.cls-btn--primary:hover { box-shadow: 0 8px 22px rgba(58, 166, 185, 0.36); transform: translateY(-1px); }

.cls-btn--ghost {
    background: var(--cls-surface); color: var(--cls-ink-soft);
    border-color: var(--cls-border);
}
.cls-btn--ghost:hover { background: var(--cls-surface-2); color: var(--cls-ink); border-color: var(--cls-brand-ring); }

.cls-btn--subtle {
    background: var(--cls-surface-3); color: var(--cls-ink-soft);
}
.cls-btn--subtle:hover { background: var(--cls-brand-soft); color: var(--cls-brand-strong); }

.cls-btn--danger { background: var(--cls-danger); color: #fff; }
.cls-btn--danger:hover { filter: brightness(1.05); transform: translateY(-1px); }

.cls-btn--sm { min-height: 34px; padding: 0 13px; font-size: 13px; }
.cls-btn:disabled, .cls-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Icon buttons (the core of the redesign) ------------------------------ */
.cls-iconbtn {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; padding: 0;
    color: var(--cls-muted);
    background: transparent; border: 1px solid transparent;
    border-radius: 10px; cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
    position: relative;
}
.cls-iconbtn:hover { background: var(--cls-surface-3); color: var(--cls-brand-strong); }
.cls-iconbtn:active { transform: scale(.94); }
.cls-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cls-brand-ring); }
.cls-iconbtn--sm { width: 30px; height: 30px; border-radius: 8px; }
.cls-iconbtn--danger:hover { background: var(--cls-danger-soft); color: var(--cls-danger); }
.cls-iconbtn--solid { background: var(--cls-surface); border-color: var(--cls-border); box-shadow: var(--cls-shadow-sm); }

/* Tooltip on hover/focus (title-style, CSS-driven) */
.cls-iconbtn[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    padding: 5px 9px; border-radius: 7px; white-space: nowrap;
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    background: #10181c; color: #fff;
    opacity: 0; pointer-events: none; transition: opacity .14s ease;
    z-index: 30;
}
.cls-iconbtn[data-tip]:hover::after,
.cls-iconbtn[data-tip]:focus-visible::after { opacity: 1; }

/* Action toolbar wrapping a set of icon buttons */
.cls-actions { display: inline-flex; align-items: center; gap: 2px; }

/* ============================================================================
   Toolbar (workspace header: search + primary actions)
   ============================================================================ */
.cls-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 14px;
    background: var(--cls-surface-2);
    border: 1px solid var(--cls-border-2);
    border-radius: var(--cls-r);
}
.cls-toolbar__spacer { flex: 1 1 auto; }

.cls-search {
    display: flex; align-items: center; gap: 9px; flex: 1 1 220px; max-width: 360px;
    padding: 0 12px; height: 40px;
    background: var(--cls-surface); border: 1px solid var(--cls-border);
    border-radius: var(--cls-r); color: var(--cls-muted);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.cls-search:focus-within { border-color: var(--cls-brand); box-shadow: 0 0 0 3px var(--cls-brand-ring); }
.cls-search input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: inherit; font-size: 14px; color: var(--cls-ink);
}
.cls-search input::placeholder { color: var(--cls-muted); }

/* ============================================================================
   File list — rows with icon action toolbars
   ============================================================================ */
.cls-files { display: flex; flex-direction: column; gap: 6px; }

.cls-file {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: 14px;
    padding: 11px 14px;
    background: var(--cls-surface);
    border: 1px solid var(--cls-border-2);
    border-radius: var(--cls-r);
    transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.cls-file:hover { border-color: var(--cls-brand-ring); box-shadow: var(--cls-shadow-sm); }
.cls-file.is-open { border-color: var(--cls-brand); box-shadow: var(--cls-shadow); }

.cls-file__ico {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--cls-surface-3); color: var(--cls-brand-strong);
}
.cls-file--dir .cls-file__ico { background: var(--cls-brand-soft); color: var(--cls-brand); }

.cls-file__main { min-width: 0; }
.cls-file__name {
    display: block; font-weight: 600; font-size: 14.5px; color: var(--cls-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit;
}
.cls-file--dir .cls-file__name { cursor: pointer; }
.cls-file__meta {
    display: flex; align-items: center; gap: 10px;
    margin-top: 2px; font-size: 12px; color: var(--cls-muted);
}
.cls-file__badge {
    padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    background: var(--cls-surface-3); color: var(--cls-ink-soft);
}
.cls-file__size { font-variant-numeric: tabular-nums; }

.cls-file__actions {
    display: flex; align-items: center; gap: 1px;
    opacity: 0; transform: translateX(4px);
    transition: opacity .16s ease, transform .16s ease;
}
.cls-file:hover .cls-file__actions,
.cls-file:focus-within .cls-file__actions { opacity: 1; transform: none; }
@media (hover: none) { .cls-file__actions { opacity: 1; transform: none; } }

/* Inline rename field */
.cls-file__rename {
    font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--cls-ink);
    padding: 6px 10px; border: 1px solid var(--cls-brand); border-radius: 8px;
    background: var(--cls-surface); outline: none; width: 100%;
    box-shadow: 0 0 0 3px var(--cls-brand-ring);
}

/* Breadcrumb */
.cls-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.cls-crumbs button {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px;
    color: var(--cls-brand-strong); font-weight: 600; padding: 3px 6px; border-radius: 7px;
}
.cls-crumbs button:hover { background: var(--cls-brand-soft); }
.cls-crumbs span.sep { color: var(--cls-muted); }
.cls-crumbs .current { color: var(--cls-muted); font-weight: 600; }

/* ---- File preview drawer -------------------------------------------------- */
.cls-preview {
    margin-top: 8px; border: 1px solid var(--cls-border); border-radius: var(--cls-r);
    overflow: hidden; background: var(--cls-surface-2);
}
.cls-preview__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--cls-border-2);
    font-size: 13px; font-weight: 600; color: var(--cls-ink-soft);
}
.cls-preview__body { padding: 14px 16px; max-height: 480px; overflow: auto; }
.cls-preview__body pre {
    margin: 0; font-family: var(--cls-mono); font-size: 12.5px; line-height: 1.6;
    color: var(--cls-ink-soft); white-space: pre-wrap; word-break: break-word;
}
.cls-preview__body img { max-width: 100%; border-radius: var(--cls-r-sm); }

/* ============================================================================
   Empty / loading / status states
   ============================================================================ */
.cls-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 12px; padding: 48px 24px; color: var(--cls-muted);
}
.cls-empty__ico {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--cls-surface-3); color: var(--cls-brand);
}
.cls-empty h4 { margin: 0; font-size: 16px; color: var(--cls-ink); }

.cls-skeleton {
    height: 60px; border-radius: var(--cls-r);
    background: linear-gradient(90deg, var(--cls-surface-2) 25%, var(--cls-surface-3) 50%, var(--cls-surface-2) 75%);
    background-size: 200% 100%; animation: cls-shimmer 1.4s infinite;
}
@keyframes cls-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.cls-spin { animation: cls-rotate .9s linear infinite; }
@keyframes cls-rotate { to { transform: rotate(360deg); } }

/* ---- Toast notifications --------------------------------------------------- */
.cls-toasts {
    position: fixed; right: 20px; bottom: 20px; z-index: 99999;
    display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.cls-toast {
    display: flex; align-items: center; gap: 11px; padding: 12px 15px;
    background: var(--cls-surface); border: 1px solid var(--cls-border);
    border-left: 3px solid var(--cls-brand);
    border-radius: var(--cls-r); box-shadow: var(--cls-shadow-lg);
    font-size: 13.5px; font-weight: 600; color: var(--cls-ink);
    animation: cls-toast-in .26s cubic-bezier(.2,.8,.3,1);
}
.cls-toast--success { border-left-color: var(--cls-success); }
.cls-toast--success .cls-ico { color: var(--cls-success); }
.cls-toast--error { border-left-color: var(--cls-danger); }
.cls-toast--error .cls-ico { color: var(--cls-danger); }
.cls-toast.is-leaving { animation: cls-toast-out .22s ease forwards; }
@keyframes cls-toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes cls-toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ============================================================================
   Modal (confirm delete, share link, new folder)
   ============================================================================ */
.cls-modal-scrim {
    position: fixed; inset: 0; z-index: 99998;
    display: grid; place-items: center; padding: 20px;
    background: rgba(15, 24, 28, 0.55); backdrop-filter: blur(3px);
    animation: cls-fade .18s ease;
}
@keyframes cls-fade { from { opacity: 0; } }
.cls-modal {
    width: min(440px, 100%);
    background: var(--cls-surface); border: 1px solid var(--cls-border);
    border-radius: var(--cls-r-lg); box-shadow: var(--cls-shadow-lg);
    overflow: hidden; animation: cls-pop .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes cls-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.cls-modal__head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; }
.cls-modal__head-ico {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--cls-r);
    background: var(--cls-brand-soft); color: var(--cls-brand-strong);
}
.cls-modal--danger { border-color: #e6c9cd; }
.cls-modal--danger .cls-modal__head-ico { background: var(--cls-danger-soft); color: var(--cls-danger); }
.cls-modal--danger .cls-modal__body { padding-top: 18px; }
.cls-delete-copy { margin: 0; line-height: 1.55; }
.cls-delete-item {
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid #eed9dc;
    border-radius: var(--cls-r-sm);
    background: #fff8f8;
    color: var(--cls-ink-soft);
}
.cls-delete-item strong { display: block; overflow-wrap: anywhere; }
.cls-modal__foot { border-top: 1px solid var(--cls-border-2); background: var(--cls-surface-2); }
.cls-modal__foot .cls-btn--danger { min-width: 142px; }
.cls-modal__foot .cls-btn:focus-visible { outline: 2px solid var(--cls-brand); outline-offset: 2px; }
.cls-modal__body { padding: 14px 22px 8px; color: var(--cls-ink-soft); font-size: 14px; }
.cls-modal__body strong { color: var(--cls-ink); word-break: break-word; }
.cls-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 22px; }
.cls-modal input[type="text"] {
    width: 100%; margin-top: 12px; padding: 10px 12px;
    border: 1px solid var(--cls-border); border-radius: var(--cls-r-sm);
    background: var(--cls-surface-2); color: var(--cls-ink);
    font-family: inherit; font-size: 14px; outline: none;
}
.cls-modal input[type="text"]:focus { border-color: var(--cls-brand); box-shadow: 0 0 0 3px var(--cls-brand-ring); }
.cls-share-field { display: flex; gap: 8px; margin-top: 12px; }
.cls-share-field input { flex: 1; font-family: var(--cls-mono); font-size: 12.5px; }

/* ============================================================================
   Form fields (builder + instructions)
   ============================================================================ */
.cls-field { display: block; margin-bottom: 16px; }
.cls-field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--cls-ink-soft); }
.cls-input, .cls-select, .cls-textarea {
    width: 100%; padding: 11px 13px; font-family: inherit; font-size: 14px;
    color: var(--cls-ink); background: var(--cls-surface-2);
    border: 1px solid var(--cls-border); border-radius: var(--cls-r-sm);
    outline: none; transition: border-color .16s ease, box-shadow .16s ease;
}
.cls-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.cls-input:focus, .cls-select:focus, .cls-textarea:focus {
    border-color: var(--cls-brand); box-shadow: 0 0 0 3px var(--cls-brand-ring); background: var(--cls-surface);
}

/* Character meter for the instruction editor */
.cls-meter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }
.cls-meter__bar { flex: 1; height: 5px; border-radius: 999px; background: var(--cls-surface-3); overflow: hidden; }
.cls-meter__fill { height: 100%; width: 0; border-radius: 999px; background: var(--cls-brand); transition: width .2s ease, background .2s ease; }
.cls-meter__fill.is-warn { background: var(--cls-warn); }
.cls-meter__fill.is-over { background: var(--cls-danger); }
.cls-meter__count { font-size: 12px; font-weight: 600; color: var(--cls-muted); font-variant-numeric: tabular-nums; }
.cls-meter__count.is-over { color: var(--cls-danger); }

/* Segmented control (guided / free mode) */
.cls-segmented {
    display: inline-flex; padding: 4px; gap: 4px;
    background: var(--cls-surface-3); border-radius: 999px;
}
.cls-segmented button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--cls-ink-soft);
    background: transparent; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cls-segmented button.is-active { background: var(--cls-surface); color: var(--cls-brand-strong); box-shadow: var(--cls-shadow-sm); }

/* Chips (guided-field quick picks) */
.cls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cls-chip {
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--cls-ink-soft); background: var(--cls-surface-2);
    border: 1px solid var(--cls-border); transition: all .16s ease;
}
.cls-chip:hover { border-color: var(--cls-brand-ring); }
.cls-chip.is-active { background: var(--cls-brand); border-color: var(--cls-brand); color: #fff; }

/* Toggle switch */
.cls-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cls-ink-soft); }
.cls-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cls-switch__track { width: 42px; height: 24px; border-radius: 999px; background: var(--cls-surface-3); border: 1px solid var(--cls-border); position: relative; transition: background .18s ease, border-color .18s ease; flex: 0 0 auto; }
.cls-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--cls-shadow-sm); transition: transform .18s ease; }
.cls-switch input:checked + .cls-switch__track { background: var(--cls-brand); border-color: var(--cls-brand); }
.cls-switch input:checked + .cls-switch__track::after { transform: translateX(18px); }
.cls-switch input:focus-visible + .cls-switch__track { box-shadow: 0 0 0 3px var(--cls-brand-ring); }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cls-studio *, .cls-studio *::before, .cls-studio *::after {
        animation-duration: .001ms !important; transition-duration: .001ms !important;
    }
}

/* ---- Small screens -------------------------------------------------------- */
@media (max-width: 640px) {
    .cls-file { grid-template-columns: auto 1fr auto; }
    .cls-file__actions { grid-column: 1 / -1; justify-content: flex-end; opacity: 1; transform: none; margin-top: 4px; }
    .cls-card__body { padding: 16px; }
}

/* ============================================================================
   Dashboard shell (sidebar + main) — used by [chatleg_studio]
   ============================================================================ */
/* Break the Studio dashboard out of the theme's constrained content column. */
body.cls-studio-active { background: #f4f7f8; overflow-x: hidden; }
.wp-dark-mode-active body.cls-studio-active,
[data-wp-dark-mode-active] body.cls-studio-active { background: #1b1f21; }
body.cls-studio-active #content,
body.cls-studio-active .site-content,
body.cls-studio-active .content-area,
body.cls-studio-active .site-main,
body.cls-studio-active .entry-content,
body.cls-studio-active .zak-container,
body.cls-studio-active .ast-container,
body.cls-studio-active .wp-block-post-content {
    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
}
body.cls-studio-active .entry-header,
body.cls-studio-active .page-header,
body.cls-studio-active .ast-single-post-order,
body.cls-studio-active footer.entry-footer { display: none !important; }

.cls-shell { position: relative; display: block; min-height: 100vh; background: var(--cls-bg); }

.cls-shell__sidebar {
    position: fixed; top: 0; left: 0; z-index: 1000;
    display: flex; flex-direction: column; gap: 18px;
    width: 280px; height: 100vh; padding: 26px 16px 18px;
    overflow-y: auto; color: #fff;
    background: linear-gradient(180deg, var(--cls-brand) 0%, var(--cls-brand-deep) 100%);
    box-shadow: 4px 0 30px rgba(20, 35, 43, 0.16);
    transition: left .3s cubic-bezier(.4,0,.2,1);
}
.cls-shell__brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 4px; }
.cls-shell__logo {
    display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 12px; background: rgba(255,255,255,.16); color: #fff;
}
.cls-shell__brand .cls-kicker { color: rgba(255,255,255,.72); }
.cls-shell__brand h1 { color: #fff; }

.cls-shell__meta { display: grid; gap: 7px; }
.cls-shell__meta span {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: 11px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600;
}
.cls-shell__meta .cls-ico { color: rgba(255,255,255,.75); }

.cls-shell__nav { display: grid; gap: 6px; margin-top: 4px; }
.cls-shell__tab {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 12px 14px; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: rgba(255,255,255,.9); text-align: left;
    font-family: inherit; transition: background .2s ease, transform .16s ease;
}
.cls-shell__tab:hover, .cls-shell__tab:focus-visible { background: rgba(255,255,255,.14); outline: none; transform: translateX(2px); }
.cls-shell__tab.is-active { background: rgba(255,255,255,.18); box-shadow: inset 3px 0 0 #fff; }
.cls-shell__tab-ico {
    display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 10px; background: rgba(255,255,255,.16); color: #fff;
}
.cls-shell__tab-text strong { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.cls-shell__tab-text small { display: block; margin-top: 1px; font-size: 11px; color: rgba(255,255,255,.66); }

.cls-shell__foot { margin-top: auto; padding: 14px 8px 4px; color: rgba(255,255,255,.6); font-size: 11px; text-align: center; }
.cls-shell__badge {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 11px;
    border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

.cls-shell__toggle {
    position: fixed; top: 22px; left: 296px; z-index: 1001;
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--cls-border); border-radius: 50%;
    background: var(--cls-surface); color: var(--cls-brand-strong);
    box-shadow: var(--cls-shadow); cursor: pointer;
    transition: left .3s cubic-bezier(.4,0,.2,1), background .18s ease, color .18s ease, transform .16s ease;
}
.cls-shell__toggle:hover { background: var(--cls-brand); color: #fff; transform: scale(1.06); }
.cls-shell__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cls-brand-ring); }
.cls-shell.is-sidebar-collapsed .cls-shell__toggle { left: 16px; }

.cls-shell__backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(15,24,28,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }

.cls-shell__main {
    display: grid; gap: 20px; align-content: start;
    min-height: 100vh; margin-left: 280px; padding: 34px;
    transition: margin-left .3s cubic-bezier(.4,0,.2,1);
}
.cls-shell.is-sidebar-collapsed .cls-shell__main { margin-left: 0; }

.cls-shell__header {
    padding: 26px 28px; border: 1px solid var(--cls-border); border-radius: var(--cls-r-lg);
    background: var(--cls-surface); box-shadow: var(--cls-shadow);
}
.cls-shell__header .cls-kicker { margin-bottom: 6px; }
.cls-shell__panel[hidden] { display: none; }
.cls-shell__panel { animation: cls-panel-in .28s ease; }
@keyframes cls-panel-in { from { opacity: 0; transform: translateY(8px); } }

.cls-module + .cls-module { margin-top: 20px; }
.cls-module__body--chatbot { min-height: 420px; }

/* Workspace root drag state */
.cls-ws { position: relative; }
.cls-ws.is-dragover::after {
    content: ''; position: absolute; inset: -6px; border-radius: var(--cls-r-lg);
    border: 2px dashed var(--cls-brand); background: var(--cls-brand-soft); pointer-events: none;
}
.cls-ws.is-busy { opacity: .7; pointer-events: none; }

/* ---- Desktop ≥ 900: sidebar docked. Below: off-canvas + backdrop --------- */
@media (max-width: 899px) {
    .cls-shell__sidebar { left: -100vw; width: min(86vw, 300px); }
    .cls-shell.is-sidebar-open .cls-shell__sidebar { left: 0; }
    .cls-shell__main, .cls-shell.is-sidebar-collapsed .cls-shell__main { margin-left: 0; padding: 78px 16px 20px; }
    .cls-shell__toggle, .cls-shell.is-sidebar-collapsed .cls-shell__toggle { left: 16px; }
    .cls-shell.is-sidebar-open .cls-shell__backdrop { opacity: 1; pointer-events: auto; }
    .cls-shell__header { padding: 20px; }
}

/* ============================================================================
   /studio UI refinement — 2026-07-10
   Direction: quiet legal workbench. Override layer for the deployed page.
   ============================================================================ */
.cls-studio {
    --cls-brand: #0f7f88;
    --cls-brand-strong: #0a6870;
    --cls-brand-deep: #184347;
    --cls-brand-soft: rgba(15, 127, 136, 0.09);
    --cls-brand-ring: rgba(15, 127, 136, 0.24);
    --cls-bg: #f5f6f7;
    --cls-surface: #ffffff;
    --cls-surface-2: #f8fafb;
    --cls-surface-3: #edf1f3;
    --cls-ink: #172026;
    --cls-ink-soft: #3f4d55;
    --cls-muted: #68767e;
    --cls-border: rgba(23, 32, 38, 0.13);
    --cls-border-2: rgba(23, 32, 38, 0.08);
    --cls-shadow-sm: 0 1px 2px rgba(23, 32, 38, 0.05);
    --cls-shadow: 0 10px 26px rgba(23, 32, 38, 0.07);
    --cls-shadow-lg: 0 22px 56px rgba(23, 32, 38, 0.15);
    --cls-r-sm: 6px;
    --cls-r: 8px;
    --cls-r-lg: 8px;
    --cls-r-xl: 10px;
    --cls-font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.52;
}
body.cls-studio-active { background: var(--cls-bg); }
body.cls-studio-active.admin-bar .cls-shell__sidebar { top: 32px; height: calc(100vh - 32px); }
body.cls-studio-active.admin-bar .cls-shell__toggle { top: 48px; }

.cls-shell { background: var(--cls-bg); }
.cls-shell__sidebar {
    width: 244px;
    gap: 14px;
    padding: 18px 12px 14px;
    background: #1f2a2d;
    box-shadow: 1px 0 0 rgba(255,255,255,.06), 10px 0 28px rgba(23,32,38,.12);
}
.cls-shell__main { margin-left: 244px; gap: 16px; padding: 24px 28px 32px; }
.cls-shell__brand { padding: 4px 6px 8px; }
.cls-shell__logo { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.10); }
.cls-shell__brand .cls-kicker, .cls-kicker { letter-spacing: .09em; font-size: 10px; }
.cls-shell__meta { gap: 5px; }
.cls-shell__meta span {
    padding: 7px 9px;
    border-radius: 7px;
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.08);
    font-size: 11px;
}
.cls-shell__tab { min-height: 48px; padding: 9px 10px; border-radius: 7px; gap: 10px; }
.cls-shell__tab:hover, .cls-shell__tab:focus-visible { transform: none; }
.cls-shell__tab.is-active { background: rgba(255,255,255,.14); box-shadow: inset 3px 0 0 #7fd6df; }
.cls-shell__tab-ico { width: 30px; height: 30px; border-radius: 7px; background: rgba(255,255,255,.11); }
.cls-shell__tab-text strong { font-size: 13px; }
.cls-shell__tab-text small { font-size: 10.5px; }
.cls-shell__foot { font-size: 10.5px; }
.cls-shell__badge { border-radius: 7px; }

.cls-shell__toggle {
    left: 256px;
    top: 18px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--cls-shadow-sm);
}
.cls-shell__toggle:hover { transform: none; }

.cls-shell__header {
    padding: 2px 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.cls-h { letter-spacing: 0; }
.cls-h--xl { font-size: clamp(24px, 2.3vw, 34px); letter-spacing: 0; }
.cls-h--lg { font-size: 18px; }
.cls-sub { max-width: 760px; color: var(--cls-muted); }

.cls-card { border-radius: 8px; box-shadow: var(--cls-shadow); }
.cls-card__head { padding: 15px 18px; background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%); }
.cls-card__title { gap: 10px; }
.cls-card__title-ico { width: 34px; height: 34px; border-radius: 7px; }
.cls-card__body { padding: 18px; }
.cls-module + .cls-module { margin-top: 16px; }
.cls-module__body--chatbot { min-height: 560px; }

.cls-btn { min-height: 38px; border-radius: 7px; font-size: 13px; font-weight: 650; box-shadow: none; }
.cls-btn--primary { background: #0f7f88; box-shadow: none; }
.cls-btn--primary:hover { transform: none; box-shadow: 0 0 0 3px var(--cls-brand-ring); }
.cls-btn--ghost { background: #fff; }
.cls-iconbtn, .cls-iconbtn--solid { border-radius: 7px; }

.cls-toolbar { padding: 10px; border-radius: 8px; background: #f8fafb; }
.cls-search { height: 38px; border-radius: 7px; max-width: 420px; }
.cls-file { border-radius: 7px; padding: 10px 12px; }
.cls-file__ico { border-radius: 7px; }
.cls-file__actions { opacity: 1; transform: none; }

.chatleg-prompt-builder { display: grid; gap: 16px; color: var(--cls-ink); }
.chatleg-builder-header h3 { margin: 0; font-size: 18px; line-height: 1.22; letter-spacing: 0; color: var(--cls-ink); }
.chatleg-builder-header p { margin: 5px 0 0; color: var(--cls-muted); font-size: 13px; }
.chatleg-mode-switch { display: inline-flex; width: fit-content; gap: 3px; padding: 3px; border-radius: 8px; background: var(--cls-surface-3); }
.chatleg-mode-btn {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cls-ink-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.chatleg-mode-btn.is-active { background: #fff; color: var(--cls-brand-strong); box-shadow: var(--cls-shadow-sm); }
.chatleg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chatleg-field-wrap { display: grid; gap: 6px; color: var(--cls-ink-soft); font-size: 12px; font-weight: 650; }
.chatleg-field,
.chatleg-preview,
.chatleg-field-wrap input[type="text"],
.chatleg-field-wrap select,
.chatleg-field-wrap textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--cls-border);
    border-radius: 7px;
    background: #fff;
    color: var(--cls-ink);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    outline: 0;
}
.chatleg-field-wrap textarea, .chatleg-preview { min-height: 150px; resize: vertical; }
.chatleg-preview { font-family: var(--cls-mono); font-size: 12.5px; background: #fbfcfd; }
.chatleg-field:focus,
.chatleg-preview:focus,
.chatleg-field-wrap input[type="text"]:focus,
.chatleg-field-wrap select:focus,
.chatleg-field-wrap textarea:focus {
    border-color: var(--cls-brand);
    box-shadow: 0 0 0 3px var(--cls-brand-ring);
}
.chatleg-check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chatleg-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--cls-border);
    border-radius: 7px;
    background: #fff;
    color: var(--cls-ink-soft);
    font-size: 13px;
    font-weight: 600;
}
.chatleg-builder-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chatleg-apply-btn,
.chatleg-reset-btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.chatleg-apply-btn { background: var(--cls-brand); color: #fff; }
.chatleg-reset-btn { background: #fff; color: var(--cls-ink-soft); border-color: var(--cls-border); }
.chatleg-status,
.chatleg-policy-note,
.chatleg-hardcoded-note { margin: 0; color: var(--cls-muted); font-size: 12.5px; }
.chatleg-status.is-error { color: var(--cls-danger); }
.chatleg-status.is-success { color: var(--cls-success); }
.chatleg-hidden { display: none !important; }

.cls-studio .mwai-chatbot,
.cls-studio .mwai-chatbot-container {
    border-radius: 8px !important;
    border-color: var(--cls-border) !important;
    background: #fff !important;
}
.cls-studio .mwai-conversation,
.cls-studio .mwai-reply,
.cls-studio .mwai-input,
.cls-studio .mwai-footer { color: var(--cls-ink) !important; }
.cls-studio .mwai-input textarea,
.cls-studio .mwai-input input[type="text"] {
    border-radius: 7px !important;
    border-color: var(--cls-border) !important;
    background: #fff !important;
}

.wp-dark-mode-active .cls-studio,
[data-wp-dark-mode-active] .cls-studio,
.cls-studio[data-theme="dark"] {
    --cls-bg: #171b1d;
    --cls-surface: #202527;
    --cls-surface-2: #252b2d;
    --cls-surface-3: #2c3336;
    --cls-ink: #f2f5f6;
    --cls-ink-soft: #c6d0d4;
    --cls-muted: #94a1a7;
    --cls-border: rgba(242,245,246,.14);
    --cls-border-2: rgba(242,245,246,.08);
}
.wp-dark-mode-active .cls-card__head,
[data-wp-dark-mode-active] .cls-card__head { background: #202527; }
.wp-dark-mode-active .chatleg-mode-btn.is-active,
.wp-dark-mode-active .chatleg-field,
.wp-dark-mode-active .chatleg-preview,
.wp-dark-mode-active .chatleg-field-wrap input[type="text"],
.wp-dark-mode-active .chatleg-field-wrap select,
.wp-dark-mode-active .chatleg-field-wrap textarea,
.wp-dark-mode-active .chatleg-check-row label,
.wp-dark-mode-active .chatleg-reset-btn,
[data-wp-dark-mode-active] .chatleg-mode-btn.is-active,
[data-wp-dark-mode-active] .chatleg-field,
[data-wp-dark-mode-active] .chatleg-preview,
[data-wp-dark-mode-active] .chatleg-field-wrap input[type="text"],
[data-wp-dark-mode-active] .chatleg-field-wrap select,
[data-wp-dark-mode-active] .chatleg-field-wrap textarea,
[data-wp-dark-mode-active] .chatleg-check-row label,
[data-wp-dark-mode-active] .chatleg-reset-btn {
    background: var(--cls-surface-2);
    color: var(--cls-ink);
}

@media (max-width: 899px) {
    body.cls-studio-active.admin-bar .cls-shell__sidebar { top: 46px; height: calc(100vh - 46px); }
    body.cls-studio-active.admin-bar .cls-shell__toggle { top: 58px; }
    .cls-shell__main,
    .cls-shell.is-sidebar-collapsed .cls-shell__main { padding: 66px 14px 18px; }
    .cls-shell__toggle,
    .cls-shell.is-sidebar-collapsed .cls-shell__toggle { left: 14px; }
}
@media (max-width: 700px) {
    .cls-card__head { padding: 14px; }
    .cls-card__body { padding: 14px; }
    .chatleg-grid { grid-template-columns: 1fr; }
    .chatleg-mode-switch { width: 100%; }
    .chatleg-mode-btn { flex: 1 1 0; }
    .cls-toolbar { align-items: stretch; }
    .cls-search { max-width: none; flex-basis: 100%; }
}

/* ============================================================================
   /studio full ChatLeg container system — 2026-07-10
   Direction: profile-area product workspace. Mirrors the profilo-utente shell.
   ============================================================================ */
.cls-studio {
    --cls-brand: #3aa6b9;
    --cls-brand-strong: #2d8a99;
    --cls-brand-deep: #236b78;
    --cls-brand-soft: rgba(58, 166, 185, 0.10);
    --cls-brand-ring: rgba(58, 166, 185, 0.26);
    --cls-bg: #f6fafb;
    --cls-surface: #ffffff;
    --cls-surface-2: #f8fbfc;
    --cls-surface-3: #eef6f7;
    --cls-ink: #1a202c;
    --cls-ink-soft: #3d4a55;
    --cls-muted: #64748b;
    --cls-border: rgba(58, 166, 185, 0.16);
    --cls-border-2: rgba(58, 166, 185, 0.10);
    --cls-shadow-sm: 0 2px 8px rgba(26, 32, 44, 0.06);
    --cls-shadow: 0 4px 20px rgba(26, 32, 44, 0.08);
    --cls-shadow-lg: 0 18px 44px rgba(26, 32, 44, 0.16);
    --cls-r-sm: 10px;
    --cls-r: 14px;
    --cls-r-lg: 18px;
    --cls-r-xl: 22px;
    --cls-font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0;
}

body.cls-studio-active {
    background: #f6fafb;
}

body.cls-studio-active #page,
body.cls-studio-active .site,
body.cls-studio-active .site-content,
body.cls-studio-active .content-area,
body.cls-studio-active .site-main,
body.cls-studio-active .entry-content,
body.cls-studio-active .zak-container,
body.cls-studio-active .wp-block-post-content {
    min-height: 100vh;
    background: transparent !important;
}

.cls-shell {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(58, 166, 185, 0.045) 0%, rgba(58, 166, 185, 0) 240px),
        #f6fafb;
}

.cls-shell__sidebar {
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    gap: 18px;
    padding: 24px 12px 16px;
    background: linear-gradient(180deg, #3aa6b9 0%, #2d8a99 100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    border: 0;
}

body.cls-studio-active.admin-bar .cls-shell__sidebar {
    top: 32px;
    height: calc(100vh - 32px);
}

.cls-shell__brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px 10px;
    margin-bottom: 4px;
}

.cls-shell__logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(35, 107, 120, 0.24);
}

.cls-shell__brand .cls-kicker {
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cls-shell__brand h1,
.cls-shell__tab-text strong {
    color: #ffffff;
    letter-spacing: 0;
}

.cls-shell__brand h1 {
    font-size: 22px;
    line-height: 1.15;
}

.cls-shell__meta {
    gap: 8px;
    padding: 0 6px;
}

.cls-shell__meta span {
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.90);
    font-size: 12px;
    font-weight: 600;
}

.cls-shell__nav {
    gap: 6px;
    padding: 0 0 4px;
}

.cls-shell__tab {
    min-height: 58px;
    padding: 12px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.90);
    transform: none;
}

.cls-shell__tab:hover,
.cls-shell__tab:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateX(4px);
}

.cls-shell__tab.is-active {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    position: relative;
}

.cls-shell__tab.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 60%;
    border-radius: 0 4px 4px 0;
    background: #ffffff;
    transform: translateY(-50%);
}

.cls-shell__tab-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.cls-shell__tab-text strong {
    font-size: 14px;
    font-weight: 650;
}

.cls-shell__tab-text small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 11px;
    line-height: 1.35;
}

.cls-shell__foot {
    padding: 12px 8px 6px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 11px;
}

.cls-shell__badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    letter-spacing: 0;
}

.cls-shell__toggle {
    top: 24px;
    left: 264px;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    color: #3aa6b9;
    box-shadow: 0 4px 14px rgba(26, 32, 44, 0.10);
}

body.cls-studio-active.admin-bar .cls-shell__toggle {
    top: 48px;
}

.cls-shell__toggle:hover,
.cls-shell__toggle:focus-visible {
    background: #3aa6b9;
    color: #ffffff;
    transform: scale(1.04);
}

.cls-shell.is-sidebar-collapsed .cls-shell__toggle {
    left: 16px;
}

.cls-shell__main {
    margin-left: 280px;
    padding: 32px 40px 40px;
    gap: 25px;
    max-width: none;
}

.cls-shell.is-sidebar-collapsed .cls-shell__main {
    margin-left: 0;
    padding-left: 80px;
}

.cls-shell__header {
    padding: 35px 30px;
    border: 1px solid rgba(58, 166, 185, 0.10);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.cls-shell__header .cls-kicker,
.cls-kicker {
    color: #3aa6b9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.cls-h {
    color: #1a202c;
    letter-spacing: 0;
}

.cls-h--xl {
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: 0;
}

.cls-h--lg {
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: 0;
}

.cls-h--md {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
}

.cls-sub {
    max-width: 860px;
    margin-top: 8px;
    color: #64748b;
    font-size: 16px;
}

.cls-card {
    overflow: hidden;
    border: 1px solid rgba(58, 166, 185, 0.12);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.cls-card__head {
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(58, 166, 185, 0.10);
    background: #ffffff;
}

.cls-card__title {
    gap: 14px;
    min-width: 0;
}

.cls-card__title-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3aa6b9 0%, #2d8a99 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(58, 166, 185, 0.28);
}

.cls-card__body {
    padding: 24px;
}

.cls-card__actions,
.cls-builder-actions,
.chatleg-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cls-module + .cls-module {
    margin-top: 25px;
}

.cls-module__body--chatbot {
    min-height: 620px;
}

.cls-btn,
.chatleg-apply-btn,
.chatleg-reset-btn,
.cls-studio button:not(.cls-shell__tab):not(.cls-shell__toggle):not(.cls-iconbtn) {
    border-radius: 10px;
    font-family: inherit;
    letter-spacing: 0;
}

.cls-btn {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 650;
}

.cls-btn--primary,
.chatleg-apply-btn {
    background: linear-gradient(135deg, #3aa6b9 0%, #2d8a99 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(58, 166, 185, 0.24);
}

.cls-btn--primary:hover,
.chatleg-apply-btn:hover {
    box-shadow: 0 10px 24px rgba(58, 166, 185, 0.26);
    transform: translateY(-1px);
}

.cls-btn--ghost,
.chatleg-reset-btn,
.cls-toolbar,
.cls-search,
.cls-file,
.chatleg-field,
.chatleg-preview,
.chatleg-field-wrap input[type="text"],
.chatleg-field-wrap select,
.chatleg-field-wrap textarea,
.chatleg-check-row label {
    background: #ffffff;
}

.cls-toolbar {
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(58, 166, 185, 0.10);
    border-radius: 14px;
    background: #f8fbfc;
}

.cls-search,
.cls-input,
.cls-select,
.cls-textarea,
.chatleg-field,
.chatleg-preview,
.chatleg-field-wrap input[type="text"],
.chatleg-field-wrap select,
.chatleg-field-wrap textarea {
    border: 1px solid rgba(58, 166, 185, 0.18);
    border-radius: 10px;
    color: #1a202c;
    font-family: inherit;
    letter-spacing: 0;
}

.cls-search {
    height: 42px;
    max-width: 440px;
}

.cls-input:focus,
.cls-select:focus,
.cls-textarea:focus,
.chatleg-field:focus,
.chatleg-preview:focus,
.chatleg-field-wrap input[type="text"]:focus,
.chatleg-field-wrap select:focus,
.chatleg-field-wrap textarea:focus,
.cls-search:focus-within {
    border-color: #3aa6b9;
    box-shadow: 0 0 0 3px rgba(58, 166, 185, 0.22);
}

.cls-file {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 12px 14px;
    border: 1px solid rgba(58, 166, 185, 0.10);
    border-radius: 12px;
}

.cls-file:hover,
.cls-file.is-open {
    border-color: rgba(58, 166, 185, 0.42);
    box-shadow: 0 8px 20px rgba(58, 166, 185, 0.12);
}

.cls-file__ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(58, 166, 185, 0.10);
    color: #2d8a99;
}

.cls-file__actions {
    opacity: 1;
    transform: none;
}

.chatleg-prompt-builder {
    display: grid;
    gap: 20px;
    color: #1a202c;
}

.chatleg-builder-header h3 {
    margin: 0;
    color: #1a202c;
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: 0;
}

.chatleg-builder-header p,
.chatleg-status,
.chatleg-policy-note,
.chatleg-hardcoded-note {
    color: #64748b;
    letter-spacing: 0;
}

.chatleg-builder-header p {
    margin: 6px 0 0;
    font-size: 14px;
}

.chatleg-mode-switch,
.cls-segmented {
    width: fit-content;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #eef6f7;
}

.chatleg-mode-btn,
.cls-segmented button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3d4a55;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.chatleg-mode-btn.is-active,
.cls-segmented button.is-active {
    background: #ffffff;
    color: #2d8a99;
    box-shadow: 0 2px 8px rgba(26, 32, 44, 0.08);
}

.chatleg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 18px;
}

.chatleg-field-wrap {
    display: grid;
    gap: 7px;
    color: #3d4a55;
    font-size: 13px;
    font-weight: 650;
}

.chatleg-field,
.chatleg-field-wrap input[type="text"],
.chatleg-field-wrap select,
.chatleg-field-wrap textarea {
    min-height: 44px;
    padding: 11px 12px;
    font-size: 14px;
    line-height: 1.5;
}

.chatleg-field-wrap textarea,
.chatleg-preview {
    min-height: 170px;
    resize: vertical;
}

.chatleg-preview {
    padding: 13px 14px;
    background: #f8fbfc;
    font-family: var(--cls-mono);
    font-size: 13px;
    line-height: 1.6;
}

.chatleg-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chatleg-check-row label {
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(58, 166, 185, 0.16);
    border-radius: 10px;
    color: #3d4a55;
    font-size: 13px;
    font-weight: 600;
}

.chatleg-apply-btn,
.chatleg-reset-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}

.chatleg-reset-btn {
    border-color: rgba(58, 166, 185, 0.18);
    color: #3d4a55;
    box-shadow: none;
}

.cls-studio .mwai-chatbot,
.cls-studio .mwai-chatbot-container,
.cls-studio .mwai-window,
.cls-studio .mwai-content {
    border-color: rgba(58, 166, 185, 0.14) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #1a202c !important;
}

.cls-studio .mwai-conversation {
    min-height: 420px !important;
    background: #ffffff !important;
}

.cls-studio .mwai-reply,
.cls-studio .mwai-input,
.cls-studio .mwai-footer {
    color: #1a202c !important;
}

.cls-studio .mwai-input textarea,
.cls-studio .mwai-input input[type="text"] {
    min-height: 46px !important;
    border: 1px solid rgba(58, 166, 185, 0.18) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #1a202c !important;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.wp-dark-mode-active .cls-studio,
[data-wp-dark-mode-active] .cls-studio,
.cls-studio[data-theme="dark"] {
    --cls-bg: #172124;
    --cls-surface: #202a2d;
    --cls-surface-2: #253033;
    --cls-surface-3: #2d393c;
    --cls-ink: #f3f7f8;
    --cls-ink-soft: #cbd7da;
    --cls-muted: #9cabb0;
    --cls-border: rgba(185, 224, 230, 0.18);
    --cls-border-2: rgba(185, 224, 230, 0.10);
}

.wp-dark-mode-active body.cls-studio-active,
[data-wp-dark-mode-active] body.cls-studio-active,
.wp-dark-mode-active .cls-shell,
[data-wp-dark-mode-active] .cls-shell {
    background: #172124;
}

.wp-dark-mode-active .cls-shell__header,
.wp-dark-mode-active .cls-card,
.wp-dark-mode-active .cls-card__head,
.wp-dark-mode-active .cls-toolbar,
.wp-dark-mode-active .cls-search,
.wp-dark-mode-active .cls-file,
.wp-dark-mode-active .chatleg-field,
.wp-dark-mode-active .chatleg-preview,
.wp-dark-mode-active .chatleg-field-wrap input[type="text"],
.wp-dark-mode-active .chatleg-field-wrap select,
.wp-dark-mode-active .chatleg-field-wrap textarea,
.wp-dark-mode-active .chatleg-check-row label,
.wp-dark-mode-active .chatleg-reset-btn,
[data-wp-dark-mode-active] .cls-shell__header,
[data-wp-dark-mode-active] .cls-card,
[data-wp-dark-mode-active] .cls-card__head,
[data-wp-dark-mode-active] .cls-toolbar,
[data-wp-dark-mode-active] .cls-search,
[data-wp-dark-mode-active] .cls-file,
[data-wp-dark-mode-active] .chatleg-field,
[data-wp-dark-mode-active] .chatleg-preview,
[data-wp-dark-mode-active] .chatleg-field-wrap input[type="text"],
[data-wp-dark-mode-active] .chatleg-field-wrap select,
[data-wp-dark-mode-active] .chatleg-field-wrap textarea,
[data-wp-dark-mode-active] .chatleg-check-row label,
[data-wp-dark-mode-active] .chatleg-reset-btn {
    background: var(--cls-surface);
    color: var(--cls-ink);
}

.wp-dark-mode-active .cls-h,
.wp-dark-mode-active .chatleg-builder-header h3,
[data-wp-dark-mode-active] .cls-h,
[data-wp-dark-mode-active] .chatleg-builder-header h3 {
    color: var(--cls-ink);
}

@media (max-width: 899px) {
    .cls-shell__sidebar {
        left: -100vw;
        width: min(85vw, 320px);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.20);
    }

    .cls-shell.is-sidebar-open .cls-shell__sidebar {
        left: 0;
    }

    .cls-shell__main,
    .cls-shell.is-sidebar-collapsed .cls-shell__main {
        margin-left: 0;
        padding: 78px 16px 22px;
    }

    .cls-shell__toggle,
    .cls-shell.is-sidebar-collapsed .cls-shell__toggle {
        left: 16px;
        top: 20px;
    }

    body.cls-studio-active.admin-bar .cls-shell__sidebar {
        top: 46px;
        height: calc(100vh - 46px);
    }

    body.cls-studio-active.admin-bar .cls-shell__toggle {
        top: 58px;
    }

    .cls-shell.is-sidebar-open .cls-shell__backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .cls-shell__header {
        padding: 20px 18px;
        border-radius: 16px;
    }

    .cls-h--xl {
        font-size: 24px;
    }

    .cls-sub {
        font-size: 15px;
    }

    .cls-card {
        border-radius: 16px;
    }

    .cls-card__head {
        align-items: flex-start;
        padding: 18px;
    }

    .cls-card__title-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .cls-card__body {
        padding: 18px;
    }

    .chatleg-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .cls-shell__main,
    .cls-shell.is-sidebar-collapsed .cls-shell__main {
        padding: 72px 14px 18px;
    }

    .cls-shell__header {
        padding: 20px 16px;
    }

    .cls-card__head {
        display: grid;
        gap: 14px;
    }

    .cls-card__actions,
    .chatleg-builder-actions,
    .cls-toolbar {
        width: 100%;
        align-items: stretch;
    }

    .cls-btn,
    .chatleg-apply-btn,
    .chatleg-reset-btn {
        width: 100%;
    }

    .chatleg-mode-switch,
    .cls-segmented {
        width: 100%;
    }

    .chatleg-mode-btn,
    .cls-segmented button {
        flex: 1 1 0;
        padding: 0 10px;
    }

    .cls-search {
        max-width: none;
        flex-basis: 100%;
    }

    .cls-file {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cls-file__actions,
    .cls-file__badge {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* Studio intentionally stays in the light ChatLeg profile style even when the site-wide dark-mode plugin is active. */
body.cls-studio-active .cls-studio,
body.wp-dark-mode-active.cls-studio-active .cls-studio,
html.wp-dark-mode-active body.cls-studio-active .cls-studio,
[data-wp-dark-mode-active] body.cls-studio-active .cls-studio {
    --cls-bg: #f6fafb !important;
    --cls-surface: #ffffff !important;
    --cls-surface-2: #f8fbfc !important;
    --cls-surface-3: #eef6f7 !important;
    --cls-ink: #1a202c !important;
    --cls-ink-soft: #3d4a55 !important;
    --cls-muted: #64748b !important;
    --cls-border: rgba(58, 166, 185, 0.16) !important;
    --cls-border-2: rgba(58, 166, 185, 0.10) !important;
    color: #1a202c !important;
    color-scheme: light !important;
}

body.cls-studio-active,
body.wp-dark-mode-active.cls-studio-active,
html.wp-dark-mode-active body.cls-studio-active,
[data-wp-dark-mode-active] body.cls-studio-active {
    background: #f6fafb !important;
}

body.cls-studio-active .cls-shell,
body.wp-dark-mode-active.cls-studio-active .cls-shell,
html.wp-dark-mode-active body.cls-studio-active .cls-shell,
[data-wp-dark-mode-active] body.cls-studio-active .cls-shell {
    background: linear-gradient(180deg, rgba(58, 166, 185, 0.045) 0%, rgba(58, 166, 185, 0) 240px), #f6fafb !important;
}

body.cls-studio-active .cls-shell__sidebar,
body.wp-dark-mode-active.cls-studio-active .cls-shell__sidebar,
html.wp-dark-mode-active body.cls-studio-active .cls-shell__sidebar,
[data-wp-dark-mode-active] body.cls-studio-active .cls-shell__sidebar {
    background: linear-gradient(180deg, #3aa6b9 0%, #2d8a99 100%) !important;
}

body.cls-studio-active .cls-shell__header,
body.cls-studio-active .cls-card,
body.cls-studio-active .cls-card__head,
body.cls-studio-active .cls-toolbar,
body.cls-studio-active .cls-search,
body.cls-studio-active .cls-file,
body.cls-studio-active .cls-modal,
body.cls-studio-active .chatleg-field,
body.cls-studio-active .chatleg-preview,
body.cls-studio-active .chatleg-field-wrap input[type="text"],
body.cls-studio-active .chatleg-field-wrap select,
body.cls-studio-active .chatleg-field-wrap textarea,
body.cls-studio-active .chatleg-check-row label,
body.cls-studio-active .chatleg-reset-btn,
body.cls-studio-active .cls-studio .mwai-chatbot,
body.cls-studio-active .cls-studio .mwai-chatbot-container,
body.cls-studio-active .cls-studio .mwai-window,
body.cls-studio-active .cls-studio .mwai-content,
body.wp-dark-mode-active.cls-studio-active .cls-shell__header,
body.wp-dark-mode-active.cls-studio-active .cls-card,
body.wp-dark-mode-active.cls-studio-active .cls-card__head,
body.wp-dark-mode-active.cls-studio-active .cls-toolbar,
body.wp-dark-mode-active.cls-studio-active .cls-search,
body.wp-dark-mode-active.cls-studio-active .cls-file,
body.wp-dark-mode-active.cls-studio-active .cls-modal,
body.wp-dark-mode-active.cls-studio-active .chatleg-field,
body.wp-dark-mode-active.cls-studio-active .chatleg-preview,
body.wp-dark-mode-active.cls-studio-active .chatleg-field-wrap input[type="text"],
body.wp-dark-mode-active.cls-studio-active .chatleg-field-wrap select,
body.wp-dark-mode-active.cls-studio-active .chatleg-field-wrap textarea,
body.wp-dark-mode-active.cls-studio-active .chatleg-check-row label,
body.wp-dark-mode-active.cls-studio-active .chatleg-reset-btn,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-chatbot,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-chatbot-container,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-window,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-content {
    background-color: #ffffff !important;
    color: #1a202c !important;
}

body.cls-studio-active .cls-h,
body.cls-studio-active .cls-file__name,
body.cls-studio-active .chatleg-builder-header h3,
body.cls-studio-active .cls-studio .mwai-reply,
body.cls-studio-active .cls-studio .mwai-input,
body.cls-studio-active .cls-studio .mwai-footer,
body.wp-dark-mode-active.cls-studio-active .cls-h,
body.wp-dark-mode-active.cls-studio-active .cls-file__name,
body.wp-dark-mode-active.cls-studio-active .chatleg-builder-header h3,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-reply,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-input,
body.wp-dark-mode-active.cls-studio-active .cls-studio .mwai-footer {
    color: #1a202c !important;
}

body.cls-studio-active .cls-sub,
body.cls-studio-active .chatleg-builder-header p,
body.cls-studio-active .chatleg-status,
body.cls-studio-active .chatleg-policy-note,
body.cls-studio-active .chatleg-hardcoded-note,
body.wp-dark-mode-active.cls-studio-active .cls-sub,
body.wp-dark-mode-active.cls-studio-active .chatleg-builder-header p,
body.wp-dark-mode-active.cls-studio-active .chatleg-status,
body.wp-dark-mode-active.cls-studio-active .chatleg-policy-note,
body.wp-dark-mode-active.cls-studio-active .chatleg-hardcoded-note {
    color: #64748b !important;
}
/* /studio-2 always-visible workspace rail - 2026-07-10 */
.cls-shell--workspace-rail .cls-chat-workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 20px;
  align-items: start;
}

.cls-shell--workspace-rail .cls-chat-workspace-layout__chat,
.cls-shell--workspace-rail .cls-chat-workspace-layout__rail {
  min-width: 0;
}

.cls-shell--workspace-rail .cls-workspace-rail {
  position: sticky;
  top: 32px;
  align-self: start;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  border: 1px solid rgba(58, 166, 185, .14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

body.admin-bar .cls-shell--workspace-rail .cls-workspace-rail {
  top: 64px;
  max-height: calc(100vh - 96px);
}

.cls-shell--workspace-rail .cls-ws--rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
}

.cls-shell--workspace-rail .cls-workspace-rail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(58, 166, 185, .10);
}

.cls-shell--workspace-rail .cls-workspace-rail__title {
  min-width: 0;
}

.cls-shell--workspace-rail .cls-workspace-rail__head h2 {
  margin: 0;
  color: #172033;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.cls-shell--workspace-rail .cls-workspace-rail__head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.cls-shell--workspace-rail .cls-workspace-rail__tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px;
  gap: 8px;
  align-items: center;
}

.cls-shell--workspace-rail .cls-search--rail {
  max-width: none;
  height: 36px;
  padding: 0 10px;
}

.cls-shell--workspace-rail .cls-search--rail input {
  min-width: 0;
  font-size: 13px;
}

.cls-shell--workspace-rail .cls-crumbs--rail {
  margin: 0;
  padding: 0 1px;
  font-size: 12px;
}

.cls-shell--workspace-rail .cls-files--rail {
  overflow: auto;
  max-height: calc(100vh - 260px);
  padding-right: 2px;
}

body.admin-bar .cls-shell--workspace-rail .cls-files--rail {
  max-height: calc(100vh - 292px);
}

.cls-shell--workspace-rail .cls-files--rail .cls-file {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
}

.cls-shell--workspace-rail .cls-files--rail .cls-file__ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.cls-shell--workspace-rail .cls-files--rail .cls-file__name {
  font-size: 13px;
}

.cls-shell--workspace-rail .cls-files--rail .cls-file__meta {
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}

.cls-shell--workspace-rail .cls-files--rail .cls-file__actions {
  opacity: 1;
  transform: none;
}

.cls-shell--workspace-rail .cls-files--rail .cls-iconbtn--sm {
  width: 28px;
  height: 28px;
}

.cls-shell--workspace-rail .cls-files--rail .cls-preview {
  grid-column: 1 / -1;
  margin-top: 8px;
}

@media (max-width: 1240px) {
  .cls-shell--workspace-rail .cls-chat-workspace-layout {
    grid-template-columns: 1fr;
  }

  .cls-shell--workspace-rail .cls-workspace-rail {
    position: relative;
    top: auto;
    max-height: none;
  }

  body.admin-bar .cls-shell--workspace-rail .cls-workspace-rail {
    top: auto;
    max-height: none;
  }

  .cls-shell--workspace-rail .cls-files--rail,
  body.admin-bar .cls-shell--workspace-rail .cls-files--rail {
    max-height: 420px;
  }
}

@media (max-width: 700px) {
  .cls-shell--workspace-rail .cls-chat-workspace-layout {
    gap: 14px;
  }

  .cls-shell--workspace-rail .cls-ws--rail {
    padding: 14px;
  }

  .cls-shell--workspace-rail .cls-workspace-rail__head {
    align-items: center;
  }

  .cls-shell--workspace-rail .cls-workspace-rail__head p {
    display: none;
  }

  .cls-shell--workspace-rail .cls-workspace-rail__tools {
    grid-template-columns: minmax(0, 1fr) 34px 34px;
  }

  .cls-shell--workspace-rail .cls-files--rail .cls-file {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cls-shell--workspace-rail .cls-files--rail .cls-file__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
/* Workspace preview modal - 70% viewport coverage - 2026-07-10 */
.cls-preview-modal-scrim {
    padding: 5vh 5vw;
    z-index: 100002;
}

.cls-preview-modal {
    width: 70vw;
    height: 70vh;
    max-width: 1180px;
    max-height: 820px;
    min-width: min(760px, 92vw);
    min-height: min(520px, 82vh);
    display: flex;
    flex-direction: column;
    background: var(--cls-surface);
}

.cls-preview-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 13px 18px;
    border-bottom: 1px solid var(--cls-border-2);
    flex: 0 0 auto;
}

.cls-preview-modal__title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cls-ink);
    font-size: 15px;
    font-weight: 700;
}

.cls-preview-modal__title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cls-preview-modal__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cls-brand-soft);
    color: var(--cls-brand-strong);
    flex: 0 0 auto;
}

.cls-preview-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px;
    background: var(--cls-surface-2);
}

.cls-preview-modal__body pre {
    margin: 0;
    font-family: var(--cls-mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--cls-ink-soft);
    white-space: pre-wrap;
    word-break: break-word;
}

.cls-preview-modal__body--image {
    display: grid;
    place-items: center;
    padding: 20px;
}

.cls-preview-modal__body--image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--cls-r-sm);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}

.cls-preview-modal__note {
    margin: 16px 0 0;
    color: var(--cls-muted);
    font-size: 12.5px;
}

@media (max-width: 900px) {
    .cls-preview-modal-scrim {
        padding: 4vh 4vw;
    }

    .cls-preview-modal {
        width: 92vw;
        height: 82vh;
        min-width: 0;
        min-height: 0;
    }
}
/* Workspace rendered Markdown + HTML preview/code toggle - 2026-07-10 */
.cls-preview-modal__body--markdown,
.cls-preview-modal__body--html {
    background: #f8fafc;
}

.cls-rendered-markdown {
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 30px;
    border: 1px solid var(--cls-border-2);
    border-radius: 14px;
    background: #fff;
    color: var(--cls-ink-soft);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.cls-rendered-markdown h1,
.cls-rendered-markdown h2,
.cls-rendered-markdown h3,
.cls-rendered-markdown h4 {
    margin: 1.25em 0 .55em;
    color: var(--cls-ink);
    line-height: 1.25;
}

.cls-rendered-markdown h1:first-child,
.cls-rendered-markdown h2:first-child,
.cls-rendered-markdown h3:first-child,
.cls-rendered-markdown h4:first-child,
.cls-rendered-markdown p:first-child {
    margin-top: 0;
}

.cls-rendered-markdown p,
.cls-rendered-markdown li,
.cls-rendered-markdown blockquote {
    font-size: 14px;
    line-height: 1.75;
}

.cls-rendered-markdown ul {
    margin: .6em 0 1em 1.2em;
    padding: 0;
}

.cls-rendered-markdown blockquote {
    margin: 1em 0;
    padding: 10px 14px;
    border-left: 3px solid var(--cls-brand);
    background: var(--cls-brand-soft);
    border-radius: 0 10px 10px 0;
}

.cls-rendered-markdown code {
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--cls-surface-3);
    font-family: var(--cls-mono);
    font-size: .92em;
}

.cls-rendered-markdown pre {
    margin: 1em 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #0f172a;
    overflow: auto;
}

.cls-rendered-markdown pre code {
    padding: 0;
    background: transparent;
    color: #e5edf7;
}

.cls-rendered-markdown a {
    color: var(--cls-brand-strong);
    font-weight: 600;
    text-decoration: none;
}

.cls-rendered-markdown a:hover {
    text-decoration: underline;
}

.cls-preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid var(--cls-border-2);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.cls-preview-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--cls-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.cls-preview-toggle button.is-active {
    background: var(--cls-brand);
    color: #fff;
}

.cls-preview-pane {
    min-height: calc(100% - 48px);
}

.cls-preview-pane pre {
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--cls-border-2);
    border-radius: 12px;
    background: #fff;
}

.cls-preview-modal__html-frame {
    display: block;
    width: 100%;
    height: calc(70vh - 128px);
    min-height: 360px;
    border: 1px solid var(--cls-border-2);
    border-radius: 12px;
    background: #fff;
}

@media (max-width: 900px) {
    .cls-rendered-markdown {
        padding: 20px 18px;
    }

    .cls-preview-modal__html-frame {
        height: calc(82vh - 128px);
        min-height: 300px;
    }
}

/* Workspace sort + move controls - 2026-07-10 */
.cls-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    background: var(--cls-surface);
    border: 1px solid var(--cls-border);
    border-radius: var(--cls-r);
    color: var(--cls-muted);
    font-size: 12px;
    font-weight: 700;
}
.cls-sort select {
    min-width: 150px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cls-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.cls-sort-picker__control {
    position: relative;
    min-width: 150px;
}
.cls-sort-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--cls-ink);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
.cls-sort-picker__trigger .cls-ico {
    color: var(--cls-muted);
    transition: transform .16s ease;
}
.cls-sort.is-open {
    border-color: var(--cls-brand);
    box-shadow: 0 0 0 3px var(--cls-brand-ring);
}
.cls-sort.is-open .cls-sort-picker__trigger .cls-ico {
    transform: rotate(180deg);
}
.cls-sort-picker__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: -10px;
    z-index: 120;
    display: grid;
    gap: 3px;
    width: max(100%, 224px);
    padding: 7px;
    border: 1px solid var(--cls-border);
    border-radius: 13px;
    background: var(--cls-surface);
    box-shadow: var(--cls-shadow-lg);
}
.cls-sort-picker__menu[hidden] {
    display: none;
}
.cls-sort-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--cls-ink-soft);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
}
.cls-sort-picker__option:hover,
.cls-sort-picker__option:focus-visible {
    outline: none;
    background: var(--cls-surface-3);
    color: var(--cls-ink);
}
.cls-sort-picker__option.is-selected {
    background: var(--cls-brand-soft);
    color: var(--cls-brand-strong);
}
.cls-sort-picker__check {
    display: inline-flex;
    opacity: 0;
    color: var(--cls-brand);
}
.cls-sort-picker__option.is-selected .cls-sort-picker__check {
    opacity: 1;
}
.cls-sort--rail {
    height: 36px;
    padding: 0 8px;
}
.cls-sort--rail > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.cls-sort--rail select,
.cls-sort--rail .cls-sort-picker__control {
    min-width: 96px;
    font-size: 12px;
}
.cls-file[draggable="true"] { cursor: grab; }
.cls-file.is-dragging { opacity: .48; cursor: grabbing; }
.cls-file.is-drop-target {
    border-color: var(--cls-brand);
    background: var(--cls-brand-soft);
    box-shadow: 0 0 0 3px var(--cls-brand-ring);
}
.cls-shell--workspace-rail .cls-workspace-rail__tools {
    grid-template-columns: minmax(0, 1fr) 104px 36px 36px;
}
@media (max-width: 700px) {
    .cls-sort { width: 100%; justify-content: space-between; }
    .cls-sort select,
    .cls-sort-picker__control { min-width: 0; flex: 1; }
    .cls-sort-picker__menu { right: 0; left: auto; }
    .cls-shell--workspace-rail .cls-workspace-rail__tools { grid-template-columns: minmax(0, 1fr) 36px 36px; }
    .cls-shell--workspace-rail .cls-sort--rail { grid-column: 1 / -1; width: 100%; }
}