#messages { scroll-margin-top: 90px; }
.wt-message-thread { display:block; width:100%; text-align:left; padding:16px 0; color:var(--text); background:none; border:0; border-bottom:1px solid var(--border); cursor:pointer; font:inherit; overflow-wrap:anywhere; }
.wt-message-thread strong { display:block; font-family:var(--font-heading); }
.wt-message-thread time, .wt-message-meta { display:block; color:var(--text-muted); font-size:.75rem; }
.wt-message-last { display:block; margin:5px 0; font-size:.87rem; }
.wt-unread-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:8px; }
.wt-message { max-width:90%; padding:14px 16px; margin:16px 0; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; overflow-wrap:anywhere; }
.wt-message--person { margin-left:auto; background:var(--bg-3,var(--bg-2)); border-color:var(--accent); }
.wt-message p { white-space:pre-wrap; margin:6px 0 0; }
.wt-message-reply { margin-top:22px; }
.wt-message-reply textarea { min-height:100px; resize:vertical; margin-bottom:12px; }
.wt-messages-actions { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0; }
.gnav__badge[data-wt-unread] { display:inline-block; min-width:18px; padding:1px 5px; border-radius:12px; background:var(--accent,#E07A6B); color:var(--on-accent,#1A1520); font-size:11px; text-align:center; }
.gnav__badge[data-wt-unread][hidden] { display:none; }
.wt-message-portrait { display:block; flex:none; width:64px; height:64px; border-radius:50%; object-fit:cover; }
.wt-message--character { display:flex; gap:12px; max-width:100%; box-sizing:border-box; }
.wt-message-copy { min-width:0; flex:1; }
.wt-message .wt-message-teaching { color:var(--text-muted); font-size:.8rem; }
.wt-message-compose, .wt-message-reply { min-width:0; }
.wt-message-compose label, .wt-message-reply label { display:block; margin:12px 0 6px; }
.wt-message-compose input, .wt-message-compose textarea, .wt-message-compose select, .wt-message-reply select { display:block; width:100%; max-width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-2); color:var(--text); font:inherit; }
.wt-message-compose textarea { min-height:120px; resize:vertical; }
.wt-message-compose button, .wt-message-dialog > button, .wt-character-write, .wt-message-reply button, .wt-messages-actions button { min-height:44px; padding:10px 16px; max-width:100%; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.wt-message-compose button, .wt-message-dialog > button { margin-top:12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-2); color:var(--text); font:inherit; }
.wt-message-compose p { overflow-wrap:anywhere; }
.wt-message-dialog { width:calc(100% - 32px); max-width:480px; max-height:calc(100dvh - 32px); box-sizing:border-box; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--bg,#1A1520); color:var(--text); overflow:auto; }
.wt-message-dialog::backdrop { background:rgba(0,0,0,.7); }
/* Stage 1 item 2 (REVIEW_EXPLORE P0 2): the site's reset (* { margin:0 }) removed the dialog's own centering, so it opened
   in the top-left corner. margin:auto puts it back in the middle; an X closes it from the top right; Send is the coral pill.
   --bg is not defined in the light theme, so the window painted its dark fallback under light-theme text; --bg-0 follows the theme. */
.wt-message-dialog { margin:auto; position:fixed; inset:0; height:fit-content; padding:24px; border-radius:16px; background:var(--bg-0,#1A1520); }
.wt-message-dialog > .wt-message-dialog__close { position:absolute; top:8px; right:8px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text); cursor:pointer; }
.wt-message-dialog > .wt-message-dialog__close:hover { background:var(--bg-2); }
.wt-message-dialog > .wt-message-dialog__close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wt-message-compose__head { display:flex; align-items:center; gap:14px; padding-right:40px; margin-bottom:4px; }
.wt-message-compose__head h2 { margin:0; font-family:var(--font-heading); font-size:1.35rem; line-height:1.25; font-weight:700; overflow-wrap:anywhere; }
.wt-message-compose [data-compose-note] { margin:12px 0 4px; color:var(--text-secondary,var(--text)); font-size:.92rem; line-height:1.55; }
.wt-message-compose button.wt-message-send { display:inline-flex; align-items:center; justify-content:center; min-width:120px; padding:10px 24px; border:0; border-radius:var(--radius-pill,999px); background:var(--accent); color:var(--on-accent,#1A1520); font-family:var(--font-body); font-weight:700; }
.wt-message-compose button.wt-message-send:hover { filter:brightness(1.08); }
.wt-message-compose button.wt-message-send:disabled { opacity:.6; cursor:default; }
.wt-message-compose button.wt-message-send:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
.wt-character-write { margin-top:12px; }
/* Stage 1 item 1 (REVIEW_EXPLORE P0 1): the page's global button reset left this button black on the dark card with no
   border. It takes the shared outline button: a visible border, the text color, a pill and Inter 600, full width. */
.wt-character-write { display:flex; align-items:center; justify-content:center; width:100%; box-sizing:border-box; border:1px solid var(--border-hover,rgba(255,255,255,.14)); border-color:color-mix(in srgb, var(--text,#f8f5f0) 38%, transparent); border-radius:var(--radius-pill,999px); background:transparent; color:var(--text,#f8f5f0); font-family:var(--font-body); font-weight:600; font-size:.9rem; line-height:1.25; text-align:center; transition:background .15s, border-color .15s; }
.wt-character-write:hover { background:var(--bg-card-hover,rgba(255,255,255,.07)); border-color:var(--accent,#E07A6B); }
.wt-character-write:focus-visible { outline:2px solid var(--accent,#E07A6B); outline-offset:2px; }

#history { scroll-margin-top:90px; overflow-wrap:anywhere; }
#history [hidden] { display:none; }
#history button { min-height:44px; white-space:normal; max-width:100%; }
#history button:focus-visible, #history input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#history p { margin:12px 0; }
.history-setting { display:flex; gap:12px; align-items:center; min-height:44px; margin-top:20px; cursor:pointer; }
.history-setting input { width:20px; height:20px; flex:none; accent-color:var(--accent); }
.history-body { white-space:pre-wrap; padding:16px; background:var(--bg-2); border-radius:var(--radius-sm); }
.history-read { display:block; font-size:.8rem; color:var(--accent-light); margin-top:6px; }

.history-summary { padding:16px; margin:20px 0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-2); }
.history-summary h3 { font-family:var(--font-heading); font-size:1rem; }
.history-summary [data-history-summary-text] { white-space:pre-wrap; }
/* CHARACTER-MESSAGE-NO-REPLY-1011: the link to the conversation under "Sent" in the Write to window. */
.wt-message-compose .wt-message-open { color:var(--accent); font-weight:600; overflow-wrap:anywhere; }