/* ── Agent Profile (character) modal ─────────────────────────────────────
   Header-button popup between Share and Sign Out. Speaks the B2 dialog
   grammar (share-dialog skeleton) with the theme's ownership semantics:
   the organisation's section sits on the neutral sunken surface, YOUR
   section wears the cream + amber pair (the chat user-bubble signature,
   same grammar as the template card's primary action). Buttons reuse the
   global .tpl-btn family from main.css. */

.char-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(17, 18, 22, 0.42);
}
.char-dialog {
    width: 470px;
    max-width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line, #E5E7EB);
    border-radius: 14px;
    padding: 18px 20px 16px;
    box-shadow: 0 1px 2px rgba(17, 18, 22, 0.05), 0 16px 44px rgba(17, 18, 22, 0.18);
    font-size: 13px;
    color: var(--b2-ink, #111216);
}
.char-hd { display: flex; align-items: center; justify-content: space-between; }
.char-hd h3 { margin: 0; font-size: 15.5px; font-weight: 650; }
.char-x { border: 0; background: none; color: var(--b2-ink-4, #9CA3AF); font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.char-x:hover { color: var(--b2-ink, #111216); background: var(--b2-sunken, #F3F4F6); }
.char-sub { margin: 2px 0 14px; font-size: 12px; color: var(--b2-ink-3, #6B7280); }
.char-loading { padding: 36px 0; text-align: center; color: var(--b2-ink-3, #6B7280); font-size: 12.5px; }
.char-error { display: flex; align-items: center; gap: 10px; color: var(--b2-ink-2, #4B5563); font-size: 12.5px; }

/* Micro-caps section labels — the template card's mono eyebrow grammar. */
.char-lab {
    margin: 14px 0 6px;
    font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--b2-ink-4, #9CA3AF);
}
.char-lock {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--b2-ink-4, #9CA3AF);
}

/* Operator-editable System character (final 2026-08-20): same neutral sunken
   identity as the read-only .char-org box — "theirs, not yours" — but a
   textarea. Same focus exemption as .char-mine (no global blue treatments).
   Height is JS-autosized to the content (_autosizeSys) so the box hugs the
   text like the read-only div does — hence no resize handle and no inner
   scrollbar; min-height only keeps a near-empty draft looking like a box. */
.char-org-edit {
    width: 100%;
    box-sizing: border-box;
    min-height: 60px;
    resize: none;
    overflow-y: hidden;
    background: var(--b2-sunken, #F3F4F6);
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--b2-ink-2, #4B5563);
}
.char-org-edit:focus,
.char-org-edit:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--b2-line-strong, #9CA3AF) !important;
}

/* Organisation section — neutral sunken card: theirs, not yours. */
.char-org {
    background: var(--b2-sunken, #F3F4F6);
    border: 1px solid var(--b2-line, #E5E7EB);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--b2-ink-2, #4B5563);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 180px;
    overflow-y: auto;
}
/* Empty System character (no tenant text seeded) — same read-only box, faint
   "Not set." placeholder so the section reads as intentionally blank. */
.char-org-empty {
    color: var(--b2-ink-4, #9CA3AF);
    font-style: italic;
}

/* My-character textarea — quiet plain field (user decision 2026-08-11): no
   amber rule, no blue focus ring. Fill matches the chat AI-reply bubble
   (#F6F4EE, from .message-assistant .message-content in theme-b2-light) so
   the box reads as "the agent's surface". Focus just darkens the hairline. */
.char-mine {
    width: 100%;
    box-sizing: border-box;
    min-height: 92px;
    resize: vertical;
    background: #F6F4EE;
    border: 1px solid var(--b2-line-2, #D1D5DB);
    border-radius: 6px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--b2-ink, #111216);
}
/* The theme adds TWO global blue focus treatments to every textarea
   (theme-b2-light.css:142 outline, :1968 accent border + 3px glow), both
   !important — exempt this field like the chat input does, so clicking in
   shows no jarring blue. Our selector out-specifies theirs, so !important
   here wins; focus just darkens the hairline one step. */
.char-mine:focus,
.char-mine:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--b2-line-strong, #9CA3AF) !important;
}
.char-count { margin-top: 4px; text-align: right; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; color: var(--b2-ink-4, #9CA3AF); }
.char-hint { margin: 10px 2px 0; font-size: 11.5px; color: var(--b2-ink-3, #6B7280); }

.char-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.char-err { flex: 1 1 auto; font-size: 11.5px; color: var(--b2-err, #DC2626); overflow-wrap: anywhere; }
/* Save button (user decision 2026-08-11): NOT the shared cream/amber tpl-btn
   stamp — match the My-character textarea instead (same #F6F4EE fill +
   #D1D5DB hairline). Scoped to this dialog so the template-card primary is
   unaffected; out-specifies .tpl-btn.primary (0,3,0 > 0,2,0). */
.char-foot .tpl-btn.primary {
    background: #F6F4EE;
    border-color: var(--b2-line-2, #D1D5DB);
    color: var(--b2-ink, #111216);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.char-foot .tpl-btn.primary:hover:not(:disabled) {
    background: var(--b2-line, #E5E7EB);
    border-color: var(--b2-line-strong, #9CA3AF);
    color: var(--b2-ink, #111216);
}
.char-foot .tpl-btn.primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.char-foot.attn { animation: charAttn .35s ease-out; }
@keyframes charAttn {
    0% { transform: translateX(0); }
    30% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}