/*
   CHAT "DNEVNIKAT" journal-object theme (spec 2026-07-02).
   Ink on aged paper, leather cover, gold ornaments.
   Pixel source of truth: prototype/dnevnik-live.html
   Style A: prototype visual rules mapped onto the real cl-dash and
   id selectors so chat.js logic/DOM/gestures stay untouched.
*/
body[data-view="chat"] {
    --cl-ink: #372815;
    --cl-ink-dim: #75603e;
    --cl-meta: #54401f;
    --cl-red: #8a3b2a;
    --cl-gold-hi: #ecd9a0;
    --cl-gold: #c9a35c;
    --cl-gold-dk: #6e4f24;
    --cl-paper: #e8dbb6;
    --cl-paper-panel: #e9dcb6;
    --cl-paper-input: #e6d8b0;
    --cl-paper-pol: #f2ecdc;
    --cl-seen: #3f5a33;
    --cl-dash: rgba(107, 82, 51, 0.25);
    --cl-font-head: 'Philosopher', serif;
    --cl-font-hand: 'Caveat', cursive;
    --cl-font-body: 'Neucha', cursive;

    background: #1a120a;
    font-family: var(--cl-font-body);
    color: var(--cl-ink);
}

/* ─── Shell: leather book ─── */
.cl-root.cl-book {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    height: 100dvh; overflow: hidden;
    background: #1a120a url('../images/textures/journal/leather.jpg');
    background-size: 420px;
    padding-top: env(safe-area-inset-top, 0px);
    -webkit-touch-callout: none; overscroll-behavior: none;
}
.cl-light {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(255, 214, 150, 0.14), transparent 55%),
        radial-gradient(160% 120% at 50% 50%, transparent 45%, rgba(12, 6, 1, 0.62) 100%);
}
.cl-groove {
    position: absolute; inset: 9px; z-index: 1; pointer-events: none; border-radius: 5px;
    border: 1px solid rgba(10, 5, 0, 0.55);
    box-shadow: 0 1px 0 rgba(236, 217, 160, 0.12), inset 0 1px 0 rgba(236, 217, 160, 0.10);
}

/* ─── Header (cover-head) ─── */
.cl-header.cl-cover-head {
    position: relative; z-index: 4; flex-shrink: 0;
    text-align: center; padding: 15px 54px 11px;
}
.cl-back, .cl-menu-btn {
    position: absolute; top: 10px; width: 42px; height: 42px;
    border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cl-back { left: 8px; }
.cl-menu-btn { right: 8px; }
.cl-back-chev {
    font-family: var(--cl-font-head); font-weight: 700; font-size: 26px; line-height: 1;
    background: linear-gradient(178deg, var(--cl-gold-hi), var(--cl-gold) 55%, #8a6a34);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.85));
}
.cl-title {
    display: inline-block; font-family: var(--cl-font-head); font-weight: 700;
    font-size: clamp(13px, 4.5vw, 18.5px); letter-spacing: 0.13em; max-width: 100%; white-space: nowrap;
    background: linear-gradient(178deg, var(--cl-gold-hi) 8%, var(--cl-gold) 46%, #8a6a34 72%, #dcbe7d 96%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(201, 163, 92, 0.18));
}
.cl-orn { display: block; margin: 1px auto 0; width: 120px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
.cl-presence {
    display: block; margin: 2px auto 0; border: none; background: none; cursor: pointer;
    font-family: var(--cl-font-hand); font-size: 15.5px; color: #d9bc7c;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

/* ─── Page (paper) ─── */
.cl-page-wrap { position: relative; flex: 1; min-height: 0; padding: 0 13px; z-index: 2; }
.cl-page {
    position: relative; height: 100%; overflow: hidden; border-radius: 2px 5px 0 0;
    background: var(--cl-paper);
    box-shadow: 0 5px 16px rgba(8, 3, 0, 0.75), 0 1px 3px rgba(8, 3, 0, 0.6);
}
/* screen highlight over the whole page */
.cl-page::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(90% 60% at 50% 26%, rgba(255, 248, 222, 0.32), transparent 72%),
        radial-gradient(80% 34% at 50% 82%, rgba(255, 248, 222, 0.22), transparent 75%);
}
/* spine shadow (left) + edge burn */
.cl-page::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, rgba(56, 32, 8, 0.30), rgba(56, 32, 8, 0.08) 12%, transparent 26%);
    box-shadow: inset 0 0 26px rgba(94, 60, 20, 0.35), inset 0 0 5px rgba(94, 60, 20, 0.22);
}

/* ─── Scroller: paper grain scrolls with the ink (background-attachment:local) ───
   Replicates the prototype's grain-at-opacity-.46: a cream veil (top, normal)
   lifts a full-strength multiply of the grain back toward cream. ─── */
body[data-view="chat"] #chatMessagesContainer {
    position: relative; height: 100%; overflow-y: auto;
    box-sizing: border-box; /* height:100% must include padding, else the scroller overflows .cl-page under the input */
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    /* extra bottom padding clears the input bar's -22px torn overlap so the last entry isn't hidden */
    padding: 20px 18px 46px 22px;
    background-color: var(--cl-paper);
    background-image:
        linear-gradient(rgba(232, 219, 182, 0.62), rgba(232, 219, 182, 0.62)),
        url('../images/textures/journal/paper-roll.jpg');
    background-repeat: repeat, repeat-y;
    background-size: auto, 100% auto;
    background-position: 0 0, top center;
    background-blend-mode: normal, multiply;
    background-attachment: local, local;
    scrollbar-width: thin; scrollbar-color: rgba(110, 79, 36, 0.4) transparent;
}
body[data-view="chat"] #chatMessagesContainer::-webkit-scrollbar { width: 4px; }
body[data-view="chat"] #chatMessagesContainer::-webkit-scrollbar-thumb { background: rgba(110, 79, 36, 0.4); border-radius: 4px; }

/* ─── Date divider (handwritten diary date, spec 2026-07-03) ─── */
.cl-date {
    position: relative; width: 100%; cursor: pointer; text-align: center;
    margin: 11px 0 15px; padding: 2px 0 4px;
}
.cl-date-txt {
    display: inline-block; transform: rotate(-1.4deg);
    font-family: var(--cl-font-hand); font-weight: 700; font-size: 30px; line-height: 1;
    color: #43301a; text-shadow: 0 0 0.5px rgba(55, 40, 21, 0.5);
}
.cl-date-rule { display: block; margin: 1px auto 0; width: clamp(120px, 58%, 185px); height: 9px; opacity: 0.72; }

/* ─── Log entry ─── */
.cl-entry {
    position: relative; display: flex; gap: 9px; align-items: flex-start;
    margin-bottom: 7px; user-select: none; -webkit-user-select: none;
    touch-action: pan-y; will-change: transform;
    animation: cl-inkIn 0.45s ease-out 1;
}
@keyframes cl-inkIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
.cl-entry.cl-rot-a { transform: rotate(-0.25deg); }
.cl-entry.cl-rot-b { transform: rotate(0.2deg); margin-left: 3px; }
.cl-entry.cl-grouped { margin-bottom: 3px; }
.cl-body { flex: 1; min-width: 0; }

.cl-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cl-name {
    font-family: var(--cl-font-hand); font-weight: 700; font-size: 21.5px;
    text-shadow: 0 0 0.6px currentColor; color: var(--cl-ink);
}
.cl-time {
    font-family: var(--cl-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.13em;
    color: var(--cl-meta); text-shadow: 0 0 0.5px rgba(84, 64, 31, 0.55);
}
.cl-edited { font-family: var(--cl-font-head); font-weight: 700; font-size: 9.5px; color: var(--cl-meta); font-style: italic; }

/* read receipt ticks */
.read-receipt-indicator { font-family: var(--cl-font-head); font-weight: 700; }
.cl-tick, .cl-tick-read { font-size: 12px; font-weight: 700; letter-spacing: -0.08em; text-shadow: 0 0 0.5px currentColor; padding: 0 2px; }
.cl-tick { color: #5e4a28; }
.cl-tick-read { color: var(--cl-seen); }

/* message text */
.cl-text {
    font-family: var(--cl-font-body); font-size: var(--chat-font-size, 16.5px);
    line-height: 1.38; color: var(--cl-ink); text-shadow: 0 0 0.35px rgba(55, 40, 21, 0.55);
    padding-right: 6px; margin-top: 2px; word-wrap: break-word; overflow-wrap: anywhere;
    white-space: pre-wrap; /* keep intentional line breaks in journal entries */
}
.cl-text.cl-deleted { font-style: italic; color: var(--cl-ink-dim); }
.mention-highlight { color: var(--cl-red); font-weight: 700; }
/* tappable link — red ink, underlined; wraps long URLs instead of overflowing */
.cl-link { color: var(--cl-red); font-weight: 700; text-decoration: underline;
    text-decoration-color: rgba(138, 59, 42, 0.5); text-decoration-thickness: 1px; text-underline-offset: 2px;
    overflow-wrap: anywhere; word-break: break-word; }
.cl-link:active { opacity: 0.7; }

/* desktop reply button (hover) */
.cl-reply-btn {
    float: right; border: none; background: none; cursor: pointer;
    font-family: var(--cl-font-head); font-size: 15px; color: #6b5233;
    opacity: 0; transition: opacity 0.12s; padding: 0 2px;
}
.cl-entry:hover .cl-reply-btn { opacity: 0.7; }

/* quote (reply) inside entry */
.cl-quote {
    display: flex; align-items: baseline; gap: 6px; margin: 1px 0 3px; padding: 1px 8px 1px 0; max-width: 96%;
    font-size: 13.5px; overflow: hidden; cursor: pointer; color: var(--cl-ink);
}
.cl-quote::before { content: ""; flex: none; align-self: stretch; width: 2.5px; border-radius: 2px; background: currentColor; opacity: 0.45; }
.cl-quote-name { flex: none; font-family: var(--cl-font-hand); font-weight: 700; font-size: 15.5px; }
.cl-quote-text { flex: 1; min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #6d5836; }

/* avatars */
.cl-ava { flex: none; margin-top: 3px; cursor: pointer; }
.cl-ava img { display: block; object-fit: cover; filter: saturate(0.85) contrast(1.02); }
.cl-ava-medallion img { width: 31px; height: 31px; border-radius: 50%; border: 2px solid #b98f4e;
    box-shadow: inset 0 0 3px rgba(60, 35, 5, 0.6), 0 1px 2px rgba(8, 3, 0, 0.4); }
.cl-ava-wanted img { width: 27px; height: 33px; border: 2px solid #4a3018; outline: 2px solid #efe6cf; outline-offset: -4px;
    box-shadow: 0 1px 2px rgba(8, 3, 0, 0.4); filter: saturate(0.7) sepia(0.25) contrast(1.05); }
.cl-ava-stamp img { width: 30px; height: 30px; border: 2.5px solid #f2ecdc; outline: 1px dotted #a9997b; outline-offset: -1px;
    box-shadow: 0 1px 2px rgba(8, 3, 0, 0.4); }
.cl-ava-init {
    width: 31px; height: 31px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--cl-font-hand); font-weight: 700; font-size: 18px;
    border: 1.5px solid currentColor; position: relative; opacity: 0.9; transform: rotate(-4deg);
}
.cl-ava-init::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; border: 1px dotted currentColor; opacity: 0.6; }
.cl-ava-spacer { flex: none; width: 31px; margin-top: 3px; }
/* new bespoke frames — small chat avatar (spec 2026-07-03) */
.cl-ava-wax img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2.5px #8a2f1e, 0 0 0 3.5px #5e1c11, 0 1px 2px rgba(8,3,0,.4); filter: saturate(0.85) sepia(0.15); }
.cl-ava-leather img { width: 28px; height: 30px; border-radius: 6px; border: 2px solid #5a3d23; box-shadow: 0 0 0 1px #d9b46a, 0 1px 2px rgba(8,3,0,.4); filter: saturate(0.85) sepia(0.15); }
.cl-ava-wood img { width: 28px; height: 30px; border-radius: 5px; border: 2px solid #6a4a28; box-shadow: 0 0 0 1px #e6be82, 0 1px 2px rgba(8,3,0,.4); filter: saturate(0.85) sepia(0.2); }
.cl-ava-order img { width: 27px; height: 27px; border-radius: 50%; box-shadow: 0 0 0 1.5px #6e4f24, 0 0 0 3px #e8cf92, 0 0 0 4px #6e4f24, 0 1px 2px rgba(8,3,0,.4); }
.cl-ava-icon img { width: 27px; height: 31px; border-radius: 13px 13px 3px 3px; border: 2px solid #b78f45; box-shadow: 0 0 0 1px #7a5a28, 0 1px 2px rgba(8,3,0,.4); filter: saturate(0.8) sepia(0.25); }
.cl-ava-shield img { width: 30px; height: 33px; object-fit: cover; clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);
    filter: drop-shadow(1px 0 0 #d9b46a) drop-shadow(-1px 0 0 #d9b46a) drop-shadow(0 1px 0 #d9b46a) drop-shadow(0 -1px 0 #d9b46a) saturate(0.85) sepia(0.15); }
.cl-ava-burnt img { width: 29px; height: 31px; border-radius: 4px; border: 2px solid #3a2412; box-shadow: 0 1px 2px rgba(8,3,0,.5); filter: sepia(0.4) brightness(0.96); }

/* header presence avatars (kept as a small stack fallback) */
.cl-presence .cl-ava { width: 22px; height: 22px; margin-top: 0; }
.cl-presence .cl-ava img { width: 22px; height: 22px; }

/* reactions — ink stamp pills (override utility classes from styles.css) */
.message-reactions-container { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.message-reactions-container:empty { display: none; }
.message-reactions-container .reaction-button {
    display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer;
    background: rgba(107, 82, 51, 0.13); border-radius: 11px; padding: 2px 8px 2px 6px;
    font-size: 12.5px; box-shadow: inset 0 0 0 1px rgba(107, 82, 51, 0.22);
    transform: rotate(-0.6deg); transition: transform 0.15s ease, background 0.15s ease;
}
.message-reactions-container .reaction-button:nth-child(even) { transform: rotate(0.7deg); }
.message-reactions-container .reaction-button.active { background: rgba(158, 106, 42, 0.25); box-shadow: inset 0 0 0 1px rgba(110, 79, 36, 0.5); }
.reaction-emoji { font-size: 14px; }
.reaction-count, .reaction-count-active { font-family: var(--cl-font-hand); font-weight: 700; font-size: 14px; color: #5e4426; }

/* photos — Polaroid taped into the journal (content-box so the frame is even) */
.cl-image { position: relative; box-sizing: content-box; width: fit-content; margin: 9px auto 12px; padding: 8px 8px 28px;
    background: var(--cl-paper-pol); box-shadow: 0 7px 16px rgba(15, 6, 0, 0.5), 0 2px 5px rgba(15, 6, 0, 0.35); transform: rotate(-2deg); cursor: pointer; }
.cl-image::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('../images/textures/journal/paper-fiber.jpg') center/cover; mix-blend-mode: multiply; opacity: 0.18; }
.cl-image img { display: block; max-width: min(62vw, 240px); max-height: 300px; width: auto; height: auto; filter: saturate(0.92) contrast(1.02); }
.cl-tape { position: absolute; z-index: 1; width: 56px; height: 16px; background: linear-gradient(180deg, rgba(233, 222, 190, 0.78), rgba(219, 205, 168, 0.65)); box-shadow: 0 1px 2px rgba(20, 10, 0, 0.28); }
.cl-tape-l { top: -8px; left: 22px; transform: rotate(-5deg); }
.cl-tape-r { top: -6px; right: 26px; transform: rotate(4deg); }

/* link previews — framed as a newspaper clipping (CSS-only over link-preview.js) */
body[data-view="chat"] .link-preview {
    position: relative; margin: 9px 0 12px 4px; max-width: 88%; overflow: hidden; border-radius: 0;
    background: #ece3c8; transform: rotate(0.8deg);
    box-shadow: 0 5px 12px rgba(15, 6, 0, 0.4), 0 1px 3px rgba(15, 6, 0, 0.3);
}
body[data-view="chat"] .link-preview::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: url('../images/textures/journal/paper-fiber.jpg') center/cover; mix-blend-mode: multiply; opacity: 0.22; }
body[data-view="chat"] .link-preview > * { position: relative; z-index: 1; }
body[data-view="chat"] .link-preview [class*="text-stone-"], body[data-view="chat"] .link-preview [class*="text-slate-"] { color: #6d5836; }
body[data-view="chat"] .link-preview .text-amber-100 { color: var(--cl-ink); }
body[data-view="chat"] .link-preview .border-stone-700 { border-color: rgba(107, 82, 51, 0.3); }

/* ─── Input bar (torn journal insert) ─── */
.cl-input-bar {
    position: relative; z-index: 3; flex-shrink: 0;
    margin: -22px 10px 0;
    filter: drop-shadow(0 -3px 6px rgba(8, 3, 0, 0.5));
}
/* The torn paper + clip live on .cl-input-inner (not .cl-input-bar): the @mention
   dropdown is inserted as a child of .cl-input-bar and sits above it (bottom:100%),
   so clipping the bar itself would erase the dropdown. Clipping only the inner keeps it visible. */
.cl-input-inner {
    position: relative; z-index: 1;
    padding: 17px 15px calc(13px + env(safe-area-inset-bottom, 0px));
    background: var(--cl-paper-input);
    clip-path: polygon(0 16px, 2% 9px, 5% 13px, 9% 4px, 13% 12px, 18% 8px, 22% 15px, 27% 3px, 31% 10px, 36% 7px, 40% 14px, 45% 5px, 50% 12px, 54% 9px, 59% 15px, 64% 4px, 68% 11px, 73% 7px, 78% 14px, 82% 5px, 87% 10px, 91% 8px, 95% 13px, 98% 6px, 100% 11px, 100% 100%, 0 100%);
}
.cl-input-inner::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; pointer-events: none;
    background: linear-gradient(180deg, rgba(70, 45, 15, 0.18), transparent);
}

/* reply / edit banner */
.cl-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: #6d5836; }
.cl-banner::before { content: ""; flex: none; width: 2.5px; height: 20px; border-radius: 2px; background: #8a6a3c; opacity: 0.6; }
.cl-banner-body { flex: 1; min-width: 0; }
.cl-banner-label { font-family: var(--cl-font-hand); font-weight: 700; font-size: 15px; color: var(--cl-red); }
.cl-banner-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #6d5836; }
.cl-banner-close { border: none; background: none; font-size: 15px; color: #7a6544; cursor: pointer; padding: 2px 6px; }

.cl-input-row { position: relative; display: flex; align-items: center; gap: 9px; }
.cl-attach, .cl-emoji-btn {
    flex: none; width: 36px; height: 36px; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0.8;
    font-size: 22px; color: #5a4426; line-height: 1;
}
.cl-attach:active, .cl-emoji-btn:active { opacity: 1; }
body[data-view="chat"] #chatInput, body[data-view="chat"] #editMessageInput {
    flex: 1; border: none; background: transparent; outline: none;
    font-family: var(--cl-font-hand); font-size: 20px; color: #4a3620;
    border-bottom: 1.5px solid rgba(90, 66, 38, 0.5); padding: 0 2px 3px; min-width: 0;
    resize: none; overflow-y: hidden; line-height: 1.25; min-height: 29px; max-height: 120px;
}
body[data-view="chat"] #chatInput::placeholder { color: #9c8a62; }
/* send button = gold pen coin */
.cl-send {
    position: relative; z-index: 1; flex: none; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(50, 32, 8, 0.65); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--cl-font-head); font-size: 17px; color: #2e1d08;
    background: radial-gradient(circle at 30% 26%, var(--cl-gold-hi), #b98f4e 48%, var(--cl-gold-dk) 92%);
    box-shadow: inset 0 1px 1px rgba(255, 242, 205, 0.8), inset 0 -3px 4px rgba(58, 35, 6, 0.5), 0 3px 7px rgba(8, 3, 0, 0.55);
    transition: filter 0.15s;
}
.cl-send svg { position: absolute; transition: opacity 0.15s; }
.cl-ic-send { opacity: 0; }
.cl-send.has-text .cl-ic-pen { opacity: 0; }
.cl-send.has-text .cl-ic-send { opacity: 1; }
.cl-send.has-text { filter: brightness(1.08); }

/* ─── Overlay system ─── */
/* action-menu backdrop/sheet are created + shown directly (no cl-open class), so visible by default */
.cl-sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(14, 7, 1, 0.55); }
.cl-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 72%; overflow-y: auto;
    background: var(--cl-paper-panel); padding: 20px 18px calc(16px + env(safe-area-inset-bottom));
    clip-path: polygon(0 14px, 3% 8px, 8% 12px, 14% 4px, 20% 11px, 27% 5px, 33% 12px, 40% 6px, 47% 13px, 54% 5px, 61% 11px, 68% 6px, 74% 12px, 81% 5px, 88% 11px, 94% 7px, 100% 12px, 100% 100%, 0 100%);
    animation: cl-sheet-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform;
}
@keyframes cl-sheet-in { from { transform: translateY(103%); } to { transform: translateY(0); } }
.cl-sheet-title { font-family: var(--cl-font-head); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: #5e4426; text-align: center; margin-bottom: 12px; }
.cl-sheet-item {
    display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: none; cursor: pointer;
    font-family: var(--cl-font-body); font-size: 17.5px; color: var(--cl-ink); padding: 11px 6px; text-align: left;
    border-bottom: 1px dashed var(--cl-dash);
}
.cl-sheet-item:last-child { border-bottom: none; }
.cl-sheet-item.cl-danger { color: var(--cl-red); }

/* emoji picker */
.cl-picker-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(14, 7, 1, 0.55); display: flex; align-items: flex-end; }
.cl-picker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; background: var(--cl-paper-panel); padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); max-height: 60%; overflow-y: auto;
    clip-path: polygon(0 14px, 3% 8px, 8% 12px, 14% 4px, 20% 11px, 27% 5px, 33% 12px, 40% 6px, 47% 13px, 54% 5px, 61% 11px, 68% 6px, 74% 12px, 81% 5px, 88% 11px, 94% 7px, 100% 12px, 100% 100%, 0 100%); }
.cl-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cl-picker-title { font-family: var(--cl-font-head); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: #5e4426; }
.cl-picker-close { border: none; background: none; font-size: 18px; color: #7a6544; cursor: pointer; }
.cl-picker-cat { font-family: var(--cl-font-head); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #8a744f; margin: 10px 0 4px; }
.cl-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.cl-picker-grid button, .cl-quick-picker-grid button { border: none; background: none; font-size: 24px; cursor: pointer; padding: 7px 0; transition: transform 0.12s; }
.cl-picker-grid button:active, .cl-quick-picker-grid button:active { transform: scale(1.25); }

/* quick emoji picker — JS sets left/right/bottom relative to the input bar */
.cl-quick-picker { position: fixed; z-index: 26; left: 10px; right: 10px; background: var(--cl-paper-panel); border-radius: 8px; padding: 10px; box-shadow: 0 8px 22px rgba(8, 3, 0, 0.5); max-height: 42vh; overflow-y: auto; }
.cl-quick-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }

/* reaction tooltip + seen popup */
.cl-pop { position: fixed; z-index: 27; background: var(--cl-paper-panel); padding: 12px 16px; border-radius: 5px; box-shadow: 0 10px 26px rgba(8, 3, 0, 0.55); max-width: 80vw; }
.cl-pop-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cl-pop-title { font-family: var(--cl-font-head); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #5e4426; text-align: center; margin-bottom: 8px; }
.cl-pop-list { display: flex; flex-direction: column; }
.cl-pop-row { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: 1px dashed rgba(107, 82, 51, 0.2); }
.cl-pop-row:last-child { border-bottom: none; }
.cl-pop-name { font-family: var(--cl-font-hand); font-weight: 700; font-size: 20px; color: var(--cl-ink); }
.cl-pop-time, .cl-pop-empty { margin-left: auto; font-family: var(--cl-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; color: var(--cl-meta); }
.cl-pop-empty { margin-left: 0; text-align: center; width: 100%; }
.cl-pop-close { display: block; margin: 10px auto 0; border: none; background: none; font-family: var(--cl-font-head); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #7a6544; cursor: pointer; }

/* mention autocomplete */
.cl-mention-dd { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 15; margin-bottom: 6px;
    background: var(--cl-paper-panel); border-radius: 6px; box-shadow: 0 -6px 18px rgba(8, 3, 0, 0.45); overflow: hidden; max-height: 180px; overflow-y: auto; }
.cl-mention-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; font-family: var(--cl-font-hand); font-weight: 700; font-size: 18px; color: var(--cl-ink); border-bottom: 1px dashed var(--cl-dash); }
.cl-mention-item:last-child { border-bottom: none; }
.cl-mention-item.selected { background: rgba(107, 82, 51, 0.16); }

/* lightbox */
.cl-lightbox { position: fixed; inset: 0; z-index: 24; background: rgba(10, 5, 1, 0.92); display: flex; align-items: center; justify-content: center; }
.cl-lightbox img { display: block; max-width: 92vw; max-height: 70vh; background: var(--cl-paper-pol); padding: 10px 10px 34px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); transform: rotate(-1deg); }
.cl-lightbox-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 14px; border: none; background: none; cursor: pointer; font-family: var(--cl-font-head); font-size: 30px; color: #d9bc7c; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8); }

/* ─── Image confirm (preview before sending) ─── */
.cl-imgconfirm {
    position: fixed; inset: 0; z-index: 27; background: rgba(10, 5, 1, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}
.cl-imgc-card { display: flex; flex-direction: column; gap: 15px; width: min(90vw, 360px); max-height: 100%; }
.cl-imgc-polaroid {
    align-self: center; max-width: 100%; background: var(--cl-paper-pol);
    padding: 10px 10px 30px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); transform: rotate(-1.2deg);
}
.cl-imgc-photo { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; object-fit: contain; }
.cl-imgc-caption {
    border: none; background: var(--cl-paper-input); color: #4a3620; outline: none;
    font-family: var(--cl-font-hand); font-size: 19px; padding: 10px 14px;
    border-bottom: 1.5px solid rgba(90, 66, 38, 0.5); box-shadow: 0 4px 10px rgba(8, 3, 0, 0.4);
}
.cl-imgc-caption::placeholder { color: #9c8a62; }
.cl-imgc-actions { display: flex; gap: 12px; }
.cl-imgc-btn {
    flex: 1; border: none; cursor: pointer; padding: 12px 0; border-radius: 3px;
    font-family: var(--cl-font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
}
.cl-imgc-cancel { background: rgba(233, 220, 182, 0.16); color: #e8dcb6; box-shadow: inset 0 0 0 1px rgba(233, 220, 182, 0.35); }
.cl-imgc-send {
    color: #2e1d08;
    background: radial-gradient(circle at 30% 26%, var(--cl-gold-hi), #b98f4e 48%, var(--cl-gold-dk) 92%);
    box-shadow: inset 0 1px 1px rgba(255, 242, 205, 0.8), inset 0 -3px 4px rgba(58, 35, 6, 0.5), 0 3px 7px rgba(8, 3, 0, 0.55);
}
.cl-imgc-send:disabled { opacity: 0.6; cursor: default; }

/* states + load more */
.cl-state { text-align: center; padding: 40px 20px; color: var(--cl-ink-dim); }
.cl-state-title { font-family: var(--cl-font-hand); font-weight: 700; font-size: 24px; color: var(--cl-ink); }
.cl-state-sub { font-family: var(--cl-font-body); font-size: 15px; margin-top: 4px; }
.load-more-button-top { text-align: center; padding: 6px 0 12px; }
.cl-loadmore { border: none; background: rgba(107, 82, 51, 0.13); border-radius: 11px; padding: 4px 14px; cursor: pointer;
    font-family: var(--cl-font-head); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #5e4426; box-shadow: inset 0 0 0 1px rgba(107, 82, 51, 0.22); }

/* ─── User dossier card (tap an avatar) ─── */
.cl-cardwrap { position: fixed; inset: 0; z-index: 23; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(12, 6, 1, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.cl-cardwrap.cl-open { opacity: 1; pointer-events: auto; }
.cl-card { transform: scale(0.85) rotate(-2deg); transition: transform 0.24s cubic-bezier(0.2, 1.4, 0.4, 1); }
.cl-cardwrap.cl-open .cl-card { transform: scale(1) rotate(-1.5deg); }

.cl-dossier { margin-top: 11px; padding-top: 8px; border-top: 1px solid rgba(58, 36, 18, 0.4); text-align: left; }
.cl-dossier.cl-bare { border-top: none; padding-top: 0; margin-top: 0; }
.cl-drow { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; font-family: var(--cl-font-head); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #5e4426; }
.cl-drow i { flex: 1; border-bottom: 1px dotted rgba(94, 68, 38, 0.5); transform: translateY(-2px); }
.cl-drow b { font-weight: 700; color: #33210f; letter-spacing: 0.05em; font-size: 10.5px; white-space: nowrap; }
/* .cl-card prefix keeps position:absolute above each card's `> * {position:relative}` rule */
.cl-card .cl-dstamp { position: absolute; z-index: 2; font-family: var(--cl-font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.2em; color: var(--cl-red); border: 2.5px solid var(--cl-red); border-radius: 3px; padding: 4px 10px 3px; transform: rotate(-11deg); opacity: 0.82; mix-blend-mode: multiply; pointer-events: none; }
.cl-card .cl-dstamp::after { content: ""; position: absolute; inset: 2px; border: 1px solid var(--cl-red); border-radius: 2px; opacity: 0.7; }

/* wanted poster */
.cl-wanted { width: 238px; background: #e5d5a8; padding: 16px 14px 14px; text-align: center; position: relative; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.cl-wanted::before { content: ""; position: absolute; inset: 0; background: url('../images/textures/journal/paper-a.jpg') center/cover; mix-blend-mode: multiply; opacity: 0.5; pointer-events: none; }
.cl-wanted::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 22px rgba(94, 60, 20, 0.4); pointer-events: none; }
.cl-wanted > * { position: relative; z-index: 1; }
.cl-nail { width: 7px; height: 7px; border-radius: 50%; margin: 0 auto 8px; background: radial-gradient(circle at 35% 30%, #d9cba4, #6e5a3a 60%, #3a2c18); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.cl-wanted h3 { font-family: var(--cl-font-head); font-weight: 700; font-size: 25px; letter-spacing: 0.2em; color: #3a2412; }
.cl-wline { width: 80%; margin: 6px auto 10px; border-top: 2px solid #3a2412; opacity: 0.7; }
.cl-wimg { width: 158px; height: 158px; object-fit: cover; border: 3px solid #3a2412; filter: sepia(0.4) saturate(0.8) contrast(1.08); }
.cl-wname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 30px; color: #4a2c14; margin-top: 8px; }
.cl-wprice { font-family: var(--cl-font-head); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #5e4426; margin-top: 4px; }
.cl-wanted .cl-dstamp { top: 148px; right: 2px; }

/* medallion card */
.cl-medal { width: 230px; text-align: center; position: relative; padding: 10px 0; }
.cl-medal .cl-ring { width: 190px; height: 222px; margin: 0 auto; border-radius: 50%/54%; padding: 9px; background: linear-gradient(160deg, #e8cf92, #8a6a34 45%, #c9a35c 70%, #6e4f24); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), inset 0 2px 3px rgba(255, 240, 200, 0.6); }
.cl-medal .cl-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%/54%; filter: saturate(0.85) sepia(0.15); display: block; }
.cl-plate { display: inline-block; margin-top: 12px; padding: 5px 18px; background: linear-gradient(175deg, #e8cf92, #a8874a); border-radius: 4px; font-family: var(--cl-font-hand); font-weight: 700; font-size: 24px; color: #3a2412; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 240, 200, 0.7); }
.cl-medtag { width: 226px; margin: 12px auto 0; background: #e9dcb6; padding: 9px 12px; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.5); transform: rotate(0.8deg); position: relative; }
.cl-medal.cl-stamped .cl-medtag { padding-bottom: 38px; }
.cl-medal .cl-dstamp { bottom: 12px; right: 16px; }

/* stamp card */
.cl-stampcard { width: 216px; position: relative; text-align: center; }
.cl-sfield { background: #f2ecdc; padding: 13px; position: relative; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    -webkit-mask: radial-gradient(circle 7px, transparent 6.5px, #000 7px) -9px -9px/18px 18px round, linear-gradient(#000, #000) 50% 50%/calc(100% - 16px) calc(100% - 16px) no-repeat;
    -webkit-mask-composite: source-over;
    mask: radial-gradient(circle 7px, transparent 6.5px, #000 7px) -9px -9px/18px 18px round, linear-gradient(#000, #000) 50% 50%/calc(100% - 16px) calc(100% - 16px) no-repeat;
    mask-composite: add; }
.cl-stampcard img { display: block; width: 100%; height: 190px; object-fit: cover; filter: saturate(0.8) sepia(0.2); }
/* opaque paper label under the stamp so name + dossier stay readable (fix 2026-07-03) */
.cl-scaption { position: relative; background: #e9dcb6; margin-top: 10px; padding: 6px 13px 11px; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.45); transform: rotate(0.5deg); }
.cl-scaption::before { content: ""; position: absolute; inset: 0; background: url('../images/textures/journal/paper-a.jpg') center/cover; mix-blend-mode: multiply; opacity: 0.4; pointer-events: none; }
.cl-scaption > * { position: relative; z-index: 1; }
.cl-sname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 24px; color: #4a3018; padding-top: 2px; }
.cl-postmark { position: absolute; top: -16px; right: -20px; width: 92px; height: 92px; pointer-events: none; opacity: 0.75; transform: rotate(12deg); }
.cl-stampcard .cl-dstamp { top: 150px; left: 6px; }

/* initial card */
.cl-initcard { width: 240px; padding: 26px 14px; text-align: center; background: #e9dcb6; position: relative; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.cl-initcard::before { content: ""; position: absolute; inset: 0; background: url('../images/textures/journal/paper-a.jpg') center/cover; mix-blend-mode: multiply; opacity: 0.45; pointer-events: none; }
.cl-initcard > * { position: relative; z-index: 1; }
.cl-biginit { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--cl-font-hand); font-weight: 700; font-size: 56px; border: 2.5px solid currentColor; position: relative; transform: rotate(-4deg); }
.cl-biginit::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dotted currentColor; opacity: 0.6; }
.cl-initcard .cl-wname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 28px; color: #4a3018; margin-top: 12px; }
.cl-whint { font-family: var(--cl-font-head); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cl-ink-dim); margin-top: 5px; }
.cl-initcard .cl-dstamp { top: 12px; right: 10px; }

/* ═══════════ BESPOKE FRAME CARDS (spec 2026-07-03) ═══════════ */
/* each reuses the shared .cl-dossier/.cl-drow info block, recolored per card */
.cl-crank { margin-top: 5px; font-family: var(--cl-font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }

/* ── WAX · sealed dispatch ── */
.cl-c-wax { position: relative; width: 290px; margin-top: 34px; }
.cl-c-wax .cl-cw-paper { position: relative; padding: 76px 26px 22px;
    background-color: #e4d3a4; background-image: linear-gradient(rgba(228,211,164,.5),rgba(228,211,164,.5)), url('../images/textures/journal/paper-a.jpg');
    background-blend-mode: normal, multiply; background-size: cover;
    box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 0 30px rgba(94,60,20,.32);
    clip-path: polygon(0 0,100% 0,100% 95%,95% 98%,90% 95%,85% 98.5%,80% 95.5%,74% 98.5%,68% 95.5%,62% 99%,56% 95.5%,50% 98.5%,44% 95.5%,38% 99%,32% 95.5%,26% 98.5%,20% 95.5%,14% 98.5%,9% 95.5%,4% 98.5%,0 95.5%); }
.cl-c-wax .cl-cw-seal { position: absolute; top: -58px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 126px; height: 126px; border-radius: 50%; z-index: 2;
    background: radial-gradient(circle at 38% 30%, #c05236, #8a2f1e 52%, #5e1c11 90%);
    box-shadow: 0 12px 22px rgba(20,4,2,.6), inset 0 4px 8px rgba(255,190,160,.4), inset 0 -8px 14px rgba(30,6,2,.65);
    display: flex; align-items: center; justify-content: center; }
.cl-c-wax .cl-cw-ring { position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed rgba(60,14,8,.5); pointer-events: none; }
.cl-c-wax .cl-cw-seal img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 3px rgba(94,28,17,.85); filter: sepia(.35) saturate(.75) brightness(.95); }
.cl-c-wax .cl-cname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 33px; line-height: 1; color: #3a2412; text-align: center; }
.cl-c-wax .cl-cw-sig { display: block; margin: 2px auto 0; width: 140px; height: 8px; opacity: .6; }
.cl-c-wax .cl-crank { text-align: center; color: #8a2f1e; }
.cl-c-wax .cl-crank::before, .cl-c-wax .cl-crank::after { content: "\2694"; margin: 0 8px; font-size: 9px; opacity: .55; }
.cl-c-wax .cl-dstamp { top: 116px; right: 2px; }

/* ── LEATHER · dossier ── */
.cl-c-leather { position: relative; width: 284px; padding: 20px 22px 22px; border-radius: 8px; text-align: center;
    background: linear-gradient(150deg,#5a3d23,#2c1c0f 62%,#472e1a), url('../images/textures/journal/leather.jpg');
    background-size: cover, 300px; background-blend-mode: multiply;
    box-shadow: inset 0 1px 2px rgba(230,190,130,.28), inset 0 0 0 1px rgba(0,0,0,.4); }
.cl-c-leather::before { content: ""; position: absolute; inset: 7px; border-radius: 5px; border: 1.5px dashed rgba(226,196,150,.5); pointer-events: none; }
.cl-lrivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 30%, #f0d9a6, #8a6a34 60%, #4a3418); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cl-lrivet-tl { top: 5px; left: 5px; } .cl-lrivet-tr { top: 5px; right: 5px; } .cl-lrivet-bl { bottom: 5px; left: 5px; } .cl-lrivet-br { bottom: 5px; right: 5px; }
.cl-lframe { width: 118px; height: 132px; margin: 6px auto 0; position: relative; padding: 9px; border-radius: 14px;
    background: linear-gradient(150deg,#6b4a2b,#33210f 60%,#5a3d23); box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 1px 2px rgba(210,170,120,.3); }
.cl-lframe::before { content: ""; position: absolute; inset: 5px; border-radius: 10px; border: 1.5px dashed rgba(226,196,150,.5); }
.cl-lframe img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; filter: sepia(.3) saturate(.85); display: block; }
.cl-lplate { display: inline-block; margin-top: 14px; padding: 5px 20px; border-radius: 4px;
    background: linear-gradient(175deg,#f0d9a6,#d9b46a 45%,#8a6a34); font-family: var(--cl-font-hand); font-weight: 700; font-size: 25px; color: #3a2412;
    box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,244,210,.8), inset 0 -2px 3px rgba(90,66,30,.5); }
.cl-c-leather .cl-crank { color: #f0d9a6; text-shadow: 0 1px 1px rgba(0,0,0,.7); }
.cl-c-leather .cl-crank::before, .cl-c-leather .cl-crank::after { content: "\25C6"; margin: 0 8px; font-size: 7px; color: #d9b46a; }
.cl-c-leather .cl-dossier { border-top-color: rgba(226,196,150,.28); }
.cl-c-leather .cl-drow { color: #cbb488; } .cl-c-leather .cl-drow i { border-bottom-color: rgba(200,168,120,.4); }
.cl-c-leather .cl-drow b { color: #f0d9a6; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.cl-c-leather .cl-dstamp { top: 14px; right: 12px; color: #f0d9a6; border-color: #d9b46a; mix-blend-mode: normal; box-shadow: inset 0 0 8px rgba(0,0,0,.4); text-shadow: 0 1px 1px rgba(0,0,0,.7); }

/* ── WOOD · carved plaque ── */
.cl-c-wood { position: relative; width: 284px; padding: 20px 22px 22px; border-radius: 6px; text-align: center;
    background: repeating-linear-gradient(87deg, rgba(38,22,8,.30) 0 1px, transparent 1px 5px, rgba(64,42,18,.16) 5px 7px, transparent 7px 12px), linear-gradient(158deg,#7a5528,#3f2913 72%);
    box-shadow: inset 0 2px 1px rgba(240,205,150,.28), inset 0 -3px 4px rgba(20,10,2,.6); }
.cl-c-wood::before { content: ""; position: absolute; inset: 9px; border-radius: 4px; pointer-events: none; box-shadow: inset 0 2px 2px rgba(20,10,2,.55), inset 0 0 0 1px rgba(120,90,40,.4); }
.cl-ros { position: absolute; width: 22px; height: 22px; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.cl-ros-tl { top: 3px; left: 5px; } .cl-ros-tr { top: 3px; right: 5px; } .cl-ros-bl { bottom: 3px; left: 5px; } .cl-ros-br { bottom: 3px; right: 5px; }
.cl-wniche { width: 116px; height: 130px; margin: 8px auto 0; padding: 7px; border-radius: 56px 56px 8px 8px;
    background: linear-gradient(158deg,#5a3d1e,#2e1d0c 70%); box-shadow: inset 0 3px 5px rgba(20,10,2,.7), 0 0 0 1.5px rgba(120,90,40,.5); }
.cl-wniche img { width: 100%; height: 100%; border-radius: 50px 50px 4px 4px; object-fit: cover; box-shadow: 0 0 0 2px rgba(217,180,106,.5); filter: sepia(.32) saturate(.85); display: block; }
.cl-c-wood .cl-cname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 31px; line-height: 1; margin-top: 13px; color: #f2dcac; text-shadow: 0 1px 0 rgba(255,240,200,.16), 0 -1px 1px rgba(28,14,3,.85), 0 2px 3px rgba(20,10,2,.5); }
.cl-c-wood .cl-crank { color: #f0d9a6; }
.cl-c-wood .cl-crank::before, .cl-c-wood .cl-crank::after { content: "\2767"; margin: 0 9px; font-size: 11px; color: #d9b46a; }
.cl-c-wood .cl-dossier { border-top-color: rgba(217,180,106,.3); }
.cl-c-wood .cl-drow { color: #e6cb96; } .cl-c-wood .cl-drow i { border-bottom-color: rgba(220,185,130,.4); }
.cl-c-wood .cl-drow b { color: #f2dcac; text-shadow: 0 -1px 1px rgba(28,14,3,.8); }
.cl-c-wood .cl-dstamp { top: 14px; right: 14px; color: #f0d9a6; border-color: #d9b46a; mix-blend-mode: normal; box-shadow: inset 0 0 8px rgba(20,10,2,.5); text-shadow: 0 -1px 1px rgba(28,14,3,.8); }

/* ── ORDER · medal on velvet ── */
.cl-c-order { position: relative; width: 284px; padding: 150px 24px 22px; border-radius: 5px; text-align: center;
    background: radial-gradient(120% 90% at 50% 22%, #7a2a3e, rgba(67,22,36,.51) 55%, #280d16); background-color: #3c1420;
    box-shadow: inset 0 0 34px rgba(10,2,6,.6), inset 0 0 0 2px rgba(217,180,106,.55), inset 0 0 0 5px rgba(40,13,22,.9), inset 0 0 0 6px rgba(217,180,106,.3); }
.cl-oribbon { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 40px; height: 54px; z-index: 1;
    background: linear-gradient(90deg,#8a2f1e 0 32%, #d9b46a 32% 42%, #8a2f1e 42% 58%, #d9b46a 58% 68%, #8a2f1e 68% 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,50% 76%,0 100%); box-shadow: 0 3px 5px rgba(0,0,0,.55); }
.cl-omedal { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 104px; height: 104px; z-index: 2; }
.cl-ostar { position: absolute; inset: 0;
    background: conic-gradient(from 0deg,#f0d9a6,#8a6a34,#f0d9a6,#8a6a34,#f0d9a6,#8a6a34,#f0d9a6,#8a6a34,#f0d9a6,#8a6a34,#f0d9a6,#8a6a34,#f0d9a6);
    clip-path: polygon(50% 0,58% 30%,79% 21%,70% 42%,98% 50%,70% 58%,79% 79%,58% 70%,50% 100%,42% 70%,21% 79%,30% 58%,2% 50%,30% 42%,21% 21%,42% 30%);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.cl-omedal img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #6e4f24, 0 0 0 6px #e8cf92, 0 0 0 7px #6e4f24; }
.cl-c-order .cl-cname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 31px; line-height: 1; color: #f4e2b6; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.cl-c-order .cl-crank { color: #f0d9a6; text-shadow: 0 1px 1px rgba(0,0,0,.7); }
.cl-c-order .cl-crank::before, .cl-c-order .cl-crank::after { content: "\2605"; margin: 0 9px; font-size: 8px; color: #d9b46a; }
.cl-c-order .cl-dossier { border-top-color: rgba(217,180,106,.4); }
.cl-c-order .cl-drow { color: #e2c79a; } .cl-c-order .cl-drow i { border-bottom-color: rgba(217,180,106,.4); }
.cl-c-order .cl-drow b { color: #f0d9a6; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.cl-c-order .cl-dstamp { top: 78px; right: 12px; color: #f0d9a6; border-color: #d9b46a; mix-blend-mode: normal; text-shadow: 0 1px 1px rgba(0,0,0,.7); }

/* ── ICON · gilded icon ── */
.cl-c-icon { position: relative; width: 288px; padding: 14px; border-radius: 132px 132px 7px 7px; text-align: center;
    background: linear-gradient(158deg,#f0d9a6,#b78f45 42%,#e6c877 60%,#8a6a34);
    box-shadow: inset 0 2px 2px rgba(255,246,214,.7), inset 0 -3px 5px rgba(90,66,30,.6); }
.cl-c-icon::before { content: ""; position: absolute; inset: 8px; border-radius: 122px 122px 4px 4px; pointer-events: none; border: 1.5px solid rgba(120,90,40,.55); box-shadow: inset 0 0 0 2px rgba(244,226,173,.5), inset 0 0 0 3.5px rgba(120,90,40,.35); }
.cl-ifield { position: relative; border-radius: 114px 114px 3px 3px; overflow: hidden; background: linear-gradient(160deg,#d9b466,#b48f4c 55%,#9a7a3e); box-shadow: inset 0 3px 6px rgba(60,40,14,.5); }
.cl-ifield-top { position: relative; height: 196px; }
.cl-ifield-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.5) saturate(.7) brightness(.9) contrast(1.05); }
.cl-ihalo { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; z-index: 2; pointer-events: none;
    background: radial-gradient(circle, rgba(255,240,190,.18) 52%, rgba(244,226,173,.10) 64%, transparent 70%);
    box-shadow: 0 0 0 1.5px rgba(244,226,173,.85), 0 0 0 3px rgba(150,110,50,.55), 0 0 10px rgba(255,238,190,.35); }
.cl-iband { position: relative; background: linear-gradient(180deg,#b8934c,#9c7c3e); padding: 12px 15px 16px; border-top: 2px solid rgba(120,90,40,.6); }
.cl-c-icon .cl-cname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 29px; line-height: 1; color: #2e1d0c; text-shadow: 0 1px 0 rgba(255,240,200,.35); }
.cl-c-icon .cl-crank { color: #5e3a1e; }
.cl-c-icon .cl-crank::before, .cl-c-icon .cl-crank::after { content: "\271C"; margin: 0 8px; font-size: 9px; color: #7a4a24; }
.cl-c-icon .cl-dossier { border-top-color: rgba(90,60,26,.5); }
.cl-c-icon .cl-drow { color: #5e3a1e; font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; }
.cl-c-icon .cl-drow i { border-bottom-color: rgba(90,60,26,.5); } .cl-c-icon .cl-drow b { color: #2e1d0c; }
.cl-c-icon .cl-dstamp { top: -14px; right: 14px; color: var(--cl-red); border-color: var(--cl-red); mix-blend-mode: normal; background: rgba(230,205,140,.75); box-shadow: 0 2px 5px rgba(0,0,0,.4); }

/* ── SHIELD · heraldic crest ── */
.cl-c-shield { position: relative; width: 284px; padding: 20px 22px 22px; border-radius: 5px; text-align: center;
    background: radial-gradient(120% 90% at 50% 20%, #45431f, #2a2712 58%, #171507);
    box-shadow: inset 0 0 30px rgba(8,6,2,.55), inset 0 0 0 2px rgba(217,180,106,.5), inset 0 0 0 5px rgba(30,26,10,.9), inset 0 0 0 6px rgba(217,180,106,.28); }
.cl-sarms { position: relative; height: 150px; margin: 4px auto 0; }
.cl-sabres { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 196px; height: 140px; z-index: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.cl-sshield { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 112px; height: 132px; z-index: 1; padding: 4px;
    background: linear-gradient(158deg,#f0d9a6,#9a7a3a 52%,#6e4f24); clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.cl-sshield img { width: 100%; height: 100%; clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%); object-fit: cover; filter: sepia(.3) saturate(.85); display: block; }
.cl-sscroll { position: relative; z-index: 2; width: 240px; margin: -6px auto 0; padding: 7px 26px; background: linear-gradient(180deg,#ecdcb0,#cdb27e);
    box-shadow: 0 5px 12px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,248,224,.7);
    clip-path: polygon(0 22%, 6% 22%, 10% 0, 90% 0, 94% 22%, 100% 22%, 96% 55%, 100% 88%, 92% 88%, 88% 100%, 12% 100%, 8% 88%, 0 88%, 4% 55%); }
.cl-c-shield .cl-cname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 27px; line-height: 1; color: #3a2412; }
.cl-c-shield .cl-crank { color: #f0d9a6; text-shadow: 0 1px 1px rgba(0,0,0,.7); }
.cl-c-shield .cl-crank::before, .cl-c-shield .cl-crank::after { content: "\269C"; margin: 0 9px; font-size: 11px; color: #d9b46a; }
.cl-c-shield .cl-dossier { border-top-color: rgba(217,180,106,.38); }
.cl-c-shield .cl-drow { color: #d8cf9a; } .cl-c-shield .cl-drow i { border-bottom-color: rgba(217,180,106,.36); }
.cl-c-shield .cl-drow b { color: #f0d9a6; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.cl-c-shield .cl-dstamp { top: 16px; right: 12px; color: #f0d9a6; border-color: #d9b46a; mix-blend-mode: normal; text-shadow: 0 1px 1px rgba(0,0,0,.7); }

/* ── BURNT · scorched parchment ── */
.cl-c-burnt { position: relative; width: 288px; padding: 26px 28px 28px; text-align: center;
    background-color: #e0cd98; background-image: linear-gradient(rgba(224,205,152,.45),rgba(224,205,152,.45)), url('../images/textures/journal/paper-a.jpg');
    background-blend-mode: normal, multiply; background-size: cover;
    clip-path: polygon(2% 3%,9% 0.5%,16% 3%,24% 0,33% 2.5%,41% 0.5%,50% 2.5%,59% 0,67% 3%,76% 0.5%,84% 2.5%,92% 0,98% 3%,99.5% 10%,97% 19%,100% 28%,98% 38%,99.5% 48%,97% 58%,100% 68%,98% 78%,99.5% 88%,97% 96%,90% 99%,81% 96.5%,72% 99.5%,63% 97%,54% 99.5%,45% 97%,36% 99.5%,27% 97%,18% 99.5%,10% 97%,3% 99%,1% 90%,3% 80%,0.5% 70%,2.5% 60%,0 50%,2.5% 40%,0.5% 30%,3% 20%,0.5% 11%); }
.cl-c-burnt::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(118% 118% at 50% 47%, transparent 54%, rgba(74,36,12,.38) 76%, rgba(40,18,4,.7) 88%, rgba(20,8,1,.9) 97%);
    clip-path: polygon(2% 3%,9% 0.5%,16% 3%,24% 0,33% 2.5%,41% 0.5%,50% 2.5%,59% 0,67% 3%,76% 0.5%,84% 2.5%,92% 0,98% 3%,99.5% 10%,97% 19%,100% 28%,98% 38%,99.5% 48%,97% 58%,100% 68%,98% 78%,99.5% 88%,97% 96%,90% 99%,81% 96.5%,72% 99.5%,63% 97%,54% 99.5%,45% 97%,36% 99.5%,27% 97%,18% 99.5%,10% 97%,3% 99%,1% 90%,3% 80%,0.5% 70%,2.5% 60%,0 50%,2.5% 40%,0.5% 30%,3% 20%,0.5% 11%); }
.cl-c-burnt > * { position: relative; z-index: 2; }
.cl-bphoto { position: relative; width: 112px; height: 126px; margin: 2px auto 0; padding: 6px; background: #efe6cd; transform: rotate(-2deg); box-shadow: 0 5px 12px rgba(20,10,2,.45); }
.cl-bphoto img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.5) saturate(.7) contrast(1.05) brightness(.96); display: block; }
.cl-bphoto::after { content: ""; position: absolute; top: -2px; right: -2px; width: 44px; height: 44px; pointer-events: none;
    background: linear-gradient(222deg, rgba(18,8,1,.92), rgba(70,34,10,.55) 42%, transparent 60%); clip-path: polygon(100% 0,0 0,100% 100%); }
.cl-c-burnt .cl-cname { font-family: var(--cl-font-hand); font-weight: 700; font-size: 32px; line-height: 1; color: #3a2412; margin-top: 12px; text-shadow: 0 0 .5px rgba(45,30,14,.5); }
.cl-c-burnt .cl-crank { color: #4a2a10; }
.cl-c-burnt .cl-crank::before, .cl-c-burnt .cl-crank::after { content: "\0482"; margin: 0 9px; font-size: 12px; opacity: .6; }
.cl-c-burnt .cl-dstamp { top: 20px; right: 16px; color: #5a3218; border-color: #5a3218; }

/* ─── Ribbon bookmark (calendar entry) ─── */
.cl-ribbon { position: absolute; top: -2px; right: 34px; z-index: 5; width: 34px; height: 74px; border: none; background: none; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(8, 3, 0, 0.5)); }

/* date divider flash on calendar jump */
.cl-date.cl-flash { animation: cl-flashInk 1.2s ease-out 1; }
@keyframes cl-flashInk { 0% { opacity: 0.35; } 30% { opacity: 1; } 100% { opacity: 1; } }

/* ─── Calendar almanac ─── */
.cl-cal { position: fixed; inset: 0; z-index: 22; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr);
    background: #1a120a url('../images/textures/journal/leather.jpg'); background-size: 420px;
    transform: translateX(103%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform;
    padding-top: env(safe-area-inset-top, 0px); }
.cl-cal.cl-open { transform: translateX(0); }
.cl-cal-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(160% 120% at 50% 50%, transparent 45%, rgba(12, 6, 1, 0.62) 100%); }
.cl-cal-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 15px 54px 11px; }
.cl-cal-page { position: relative; margin: 0 13px 12px; border-radius: 2px 5px 2px 2px; overflow: hidden; background: var(--cl-paper); box-shadow: 0 5px 16px rgba(8, 3, 0, 0.75); }
.cl-cal-inner { position: relative; z-index: 1; height: 100%; overflow-y: auto; padding: 20px 16px; overscroll-behavior: contain;
    background-color: var(--cl-paper);
    background-image: linear-gradient(rgba(232, 219, 182, 0.6), rgba(232, 219, 182, 0.6)), url('../images/textures/journal/paper-a.jpg');
    background-repeat: repeat, no-repeat; background-size: auto, cover; background-blend-mode: normal, multiply; }
.cl-cal-month { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 2px; }
.cl-cal-name { font-family: var(--cl-font-hand); font-weight: 700; font-size: 33px; color: #3a2a12; min-width: 158px; text-align: center; }
.cl-flor { flex: none; opacity: 0.75; }
.cl-cal-nav { border: none; background: none; font-family: var(--cl-font-head); font-weight: 700; font-size: 26px; color: #3a2a12; cursor: pointer; padding: 2px 13px; }
.cl-cal-nav:disabled { opacity: 0.25; }
.cl-cal-sub { text-align: center; font-family: var(--cl-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cl-meta); margin-bottom: 4px; }
.cl-cal-orn { display: block; margin: 0 auto 13px; width: 150px; opacity: 0.7; }
.cl-altable { border: 1.2px solid rgba(74, 54, 26, 0.45); box-shadow: inset 0 0 0 3px rgba(74, 54, 26, 0.07), 0 1px 4px rgba(60, 40, 15, 0.12); background: rgba(255, 250, 235, 0.16); }
.cl-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
.cl-dow span { text-align: center; padding: 7px 0 6px; font-family: var(--cl-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; color: var(--cl-meta); border-bottom: 1.5px solid rgba(74, 54, 26, 0.4); border-right: 1px solid rgba(90, 66, 38, 0.14); }
.cl-dow span:last-child { border-right: none; }
.cl-dow span.cl-we { color: #7c3a28; }
.cl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cl-cal-fill { border-right: 1px solid rgba(90, 66, 38, 0.14); border-bottom: 1px solid rgba(90, 66, 38, 0.14); }
.cl-cal-fill:nth-child(7n), .cl-cal-day:nth-child(7n) { border-right: none; }
.cl-cal-day { position: relative; aspect-ratio: 1; background: none; cursor: pointer; border: none; border-right: 1px solid rgba(90, 66, 38, 0.14); border-bottom: 1px solid rgba(90, 66, 38, 0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--cl-font-body); font-size: 17.5px; color: #6f5c39; }
.cl-cal-day.cl-has { color: var(--cl-ink); font-weight: 700; }
.cl-cal-day.cl-we { color: #8a4a34; }
.cl-cal-day.cl-we.cl-has { color: #6b2d1c; }
.cl-cal-day:disabled { cursor: default; }
.cl-cal-dots { display: flex; gap: 2.5px; height: 7px; align-items: center; }
.cl-cal-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #4a3418; opacity: 0.85; }
.cl-cal-dots i.cl-big { width: 7.5px; height: 7.5px; opacity: 0.95; }
.cl-cal-ring { position: absolute; inset: 3px; pointer-events: none; }
.cl-moon { position: absolute; top: 3px; right: 4px; opacity: 0.6; pointer-events: none; }
.cl-cal-legend { margin-top: 14px; text-align: center; font-family: var(--cl-font-hand); font-size: 16px; color: var(--cl-meta); }
.cl-cal-sketch { display: block; margin: 24px auto 0; opacity: 0.5; max-width: 100%; }

/* ─── Settings sheet (cs-*) ─── */
/* backdrop is created only while open (removed on close); JS fades it via inline opacity */
.cs-backdrop { position: fixed; inset: 0; z-index: 28; background: rgba(14, 7, 1, 0.55); opacity: 1; transition: opacity 0.22s ease; }
.cs-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 29; max-height: 82%; overflow-y: auto;
    background: var(--cl-paper-panel); padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
    clip-path: polygon(0 14px, 3% 8px, 8% 12px, 14% 4px, 20% 11px, 27% 5px, 33% 12px, 40% 6px, 47% 13px, 54% 5px, 61% 11px, 68% 6px, 74% 12px, 81% 5px, 88% 11px, 94% 7px, 100% 12px, 100% 100%, 0 100%);
    transform: translateY(103%); transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform;
}
.cs-sheet.cs-open { transform: translateY(0); }
.cs-sheet.cs-closing { transform: translateY(103%); }
.cs-handle { display: flex; justify-content: center; padding: 4px 0 8px; cursor: grab; }
.cs-handle-bar { width: 42px; height: 4px; border-radius: 3px; background: rgba(107, 82, 51, 0.4); }
.cs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cs-header-title { font-family: var(--cl-font-head); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #5e4426; }
.cs-header-close { border: none; background: none; font-size: 18px; color: #7a6544; cursor: pointer; }
.cs-section { display: flex; align-items: center; gap: 9px; margin: 15px 4px 3px; font-family: var(--cl-font-head); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #8a744f; }
.cs-section::after { content: ""; flex: 1; border-top: 1px solid rgba(107, 82, 51, 0.35); }
.cs-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px dashed var(--cl-dash); font-size: 16.5px; }
.cs-row:last-child { border-bottom: none; }
.cs-row-col { flex-direction: column; align-items: flex-start; gap: 9px; }
.cs-row-info { display: flex; flex-direction: column; }
.cs-row-label { font-family: var(--cl-font-body); font-size: 16.5px; color: var(--cl-ink); }
.cs-row-sub { font-family: var(--cl-font-head); font-size: 10px; letter-spacing: 0.1em; color: #8a744f; }
.cs-pills { display: flex; gap: 7px; align-items: baseline; }
.cs-pill { border: 1.5px solid rgba(74, 48, 24, 0.45); background: none; border-radius: 3px; padding: 2px 9px; cursor: pointer; font-family: var(--cl-font-head); color: #6f5c39; line-height: 1.15; }
.cs-pill.cs-pill-on { border-color: #3a2412; color: #2e1d08; background: rgba(107, 82, 51, 0.2); box-shadow: inset 0 1px 2px rgba(60, 35, 5, 0.28); }
.cs-tog { flex: none; width: 44px; height: 24px; border-radius: 12px; border: 1px solid rgba(74, 48, 24, 0.55); cursor: pointer; position: relative; background: rgba(107, 82, 51, 0.18); transition: background 0.18s; }
.cs-tog-dot { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--cl-gold-hi), #b98f4e 55%, var(--cl-gold-dk)); box-shadow: 0 1px 2px rgba(8, 3, 0, 0.5); transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cs-tog.cs-tog-on { background: rgba(94, 110, 70, 0.35); }
.cs-tog.cs-tog-on .cs-tog-dot { transform: translateX(20px); }
.cs-act { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: none; background: none; cursor: pointer; padding: 11px 4px; border-bottom: 1px dashed var(--cl-dash); text-align: left; }
.cs-act-label { font-family: var(--cl-font-body); font-size: 16.5px; color: var(--cl-ink); }
.cs-act.cs-act-danger .cs-act-label { color: var(--cl-red); }
.cs-act-sub { font-family: var(--cl-font-head); font-size: 10px; letter-spacing: 0.1em; color: #8a744f; }

/* avatar frame picker in settings */
.cs-fpicks { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; width: 100%; }
.cs-fprev { border: none; background: none; padding: 5px; border-radius: 6px; cursor: pointer; }
.cs-fprev.cs-fprev-on { box-shadow: 0 0 0 2px rgba(138, 59, 42, 0.6); }
.cs-fprev img, .cs-fp-init { display: block; object-fit: cover; }
.cs-fp-medallion img, .cs-fp-medallion .cs-fp-init { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #b98f4e; box-shadow: inset 0 0 3px rgba(60, 35, 5, 0.6), 0 1px 2px rgba(8, 3, 0, 0.35); }
.cs-fp-wanted img, .cs-fp-wanted .cs-fp-init { width: 34px; height: 42px; border: 2px solid #4a3018; outline: 2px solid #efe6cf; outline-offset: -4px; box-shadow: 0 1px 2px rgba(8, 3, 0, 0.35); }
.cs-fp-wanted img { filter: saturate(0.7) sepia(0.25) contrast(1.05); }
.cs-fp-stamp img, .cs-fp-stamp .cs-fp-init { width: 38px; height: 38px; border: 2.5px solid #f2ecdc; outline: 1px dotted #a9997b; outline-offset: -1px; box-shadow: 0 1px 2px rgba(8, 3, 0, 0.35); }
.cs-fp-init { display: flex; align-items: center; justify-content: center; font-family: var(--cl-font-hand); font-weight: 700; font-size: 23px; color: var(--cl-ink); background: rgba(242, 236, 220, 0.55); }
/* new bespoke frames — picker previews */
.cs-fp-wax img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px #8a2f1e, 0 0 0 4.5px #5e1c11, 0 1px 2px rgba(8,3,0,.35); }
.cs-fp-leather img { width: 36px; height: 40px; border-radius: 7px; border: 2px solid #5a3d23; box-shadow: 0 0 0 1.5px #d9b46a, 0 1px 2px rgba(8,3,0,.35); }
.cs-fp-wood img { width: 36px; height: 40px; border-radius: 6px; border: 2px solid #6a4a28; box-shadow: 0 0 0 1.5px #e6be82, 0 1px 2px rgba(8,3,0,.35); }
.cs-fp-order img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px #6e4f24, 0 0 0 4px #e8cf92, 0 0 0 5.5px #6e4f24, 0 1px 2px rgba(8,3,0,.35); }
.cs-fp-icon img { width: 34px; height: 42px; border-radius: 17px 17px 3px 3px; border: 2px solid #b78f45; box-shadow: 0 0 0 1.5px #7a5a28, 0 1px 2px rgba(8,3,0,.35); }
.cs-fp-shield img { width: 34px; height: 38px; object-fit: cover; clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);
    filter: drop-shadow(1.5px 0 0 #d9b46a) drop-shadow(-1.5px 0 0 #d9b46a) drop-shadow(0 1.5px 0 #d9b46a) drop-shadow(0 -1.5px 0 #d9b46a); }
.cs-fp-burnt img { width: 37px; height: 40px; border-radius: 5px; border: 2px solid #3a2412; box-shadow: 0 1px 2px rgba(8,3,0,.4); filter: sepia(0.4); }
.cs-fupbtn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px dashed rgba(74, 48, 24, 0.5); background: none; border-radius: 3px; padding: 5px 11px; cursor: pointer; font-family: var(--cl-font-body); font-size: 15px; color: #5a4426; margin-left: auto; }
/* framed picker cells with captions (10 frames) */
.cs-fpicks { align-items: flex-start; gap: 10px 9px; }
.cs-fpcell { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 54px; }
.cs-fpcell .cs-fprev { padding: 4px; }
.cs-fpcap { font-family: var(--cl-font-head); font-weight: 700; font-size: 8.5px; letter-spacing: 0.03em; text-transform: uppercase; color: #6a5230; text-align: center; line-height: 1.15; }
.cs-fadjust { margin-left: 8px; }

/* ─── Avatar cropper (pan + zoom → square) ─── */
.cs-crop-back { position: fixed; inset: 0; z-index: 40; background: rgba(10, 5, 1, 0.86); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cs-crop-card { width: min(92vw, 312px); background: var(--cl-paper-panel); border-radius: 6px; padding: 16px 16px 18px; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.65); }
.cs-crop-title { font-family: var(--cl-font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #5e4426; text-align: center; margin-bottom: 13px; }
.cs-crop-view { position: relative; width: 264px; height: 264px; margin: 0 auto; overflow: hidden; border-radius: 4px; background: #241708; touch-action: none; cursor: grab; box-shadow: inset 0 0 0 1px rgba(90, 66, 38, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.5); }
.cs-crop-view img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.cs-crop-ring { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cs-crop-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px dashed rgba(236, 217, 160, 0.62); box-shadow: 0 0 0 9999px rgba(20, 10, 2, 0.26); }
.cs-crop-zoomrow { display: flex; align-items: center; gap: 11px; margin: 15px 4px 2px; color: #7a6544; font-family: var(--cl-font-head); font-weight: 700; font-size: 18px; }
.cs-crop-zoomrow input[type=range] { flex: 1; accent-color: var(--cl-gold); height: 3px; }
.cs-crop-hint { font-family: var(--cl-font-body); font-size: 12.5px; color: #8a744f; text-align: center; margin-top: 6px; }
.cs-crop-actions { display: flex; gap: 10px; margin-top: 14px; }
.cs-crop-btn { flex: 1; border: none; cursor: pointer; padding: 11px 0; border-radius: 3px; font-family: var(--cl-font-head); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; }
.cs-crop-cancel { background: rgba(107, 82, 51, 0.16); color: #5a4426; box-shadow: inset 0 0 0 1px rgba(107, 82, 51, 0.3); }
.cs-crop-save { color: #2e1d08; background: radial-gradient(circle at 30% 26%, var(--cl-gold-hi), #b98f4e 48%, var(--cl-gold-dk) 92%); box-shadow: inset 0 1px 1px rgba(255, 242, 205, 0.8), 0 3px 7px rgba(8, 3, 0, 0.5); }
.cs-fnote { font-family: var(--cl-font-head); font-size: 10px; letter-spacing: 0.12em; color: #8a744f; margin-top: 6px; }

/* compact mode */
.chat-compact-mode .cl-entry { margin-bottom: 3px; }
.chat-compact-mode .cl-text { line-height: 1.25; }