/* Fonts loaded via HTML */
:root {
--chat-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body {
background:
radial-gradient(1200px 600px at 50% -200px, rgba(41, 131, 221, 0.14), transparent 65%),
#1e1e1e;
color: #e0e0e0;
font-family: var(--chat-font), 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiSymbols';
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
}
.inline-form {
display: inline;
}
body.chat-shell {
--terminal-amber: #ffad33;
--terminal-amber-soft: #ffd37a;
--terminal-amber-user: #ffbf62;
--terminal-selection-bg: color-mix(in srgb, var(--terminal-amber-soft) 82%, white);
--terminal-selection-text: var(--terminal-ink);
--terminal-sidebar-label: #cfa15e;
--terminal-sidebar-value: #ffe8bf;
--terminal-sidebar-meta: #d9b57f;
--terminal-ink: #120b05;
--terminal-panel: #1a120b;
--terminal-panel-2: #0d0906;
--terminal-modal-bg-top: rgba(22, 15, 10, 0.98);
--terminal-modal-bg-bottom: rgba(10, 7, 5, 0.98);
--terminal-modal-text: #ffd79a;
--terminal-modal-heading: #ffe0a6;
--terminal-modal-control-bg: rgba(0, 0, 0, 0.45);
--terminal-modal-button-bg: rgba(0, 0, 0, 0.45);
--terminal-modal-button-bg-hover: rgba(0, 0, 0, 0.58);
--terminal-modal-button-active-bg: rgba(255, 173, 51, 0.16);
--terminal-border: rgba(255, 173, 51, 0.24);
--terminal-glow: rgba(255, 145, 0, 0.2);
--terminal-bloom-soft: rgba(245, 155, 47, 0.2);
--terminal-bloom-mid: rgba(245, 155, 47, 0.5);
--terminal-bloom-strong: rgba(245, 155, 47, 0.96);
--theme-hue-rotate: 0deg;
--theme-brightness: 1;
--theme-emoji-filter:
grayscale(1)
sepia(1)
saturate(7)
hue-rotate(var(--theme-hue-rotate))
brightness(var(--theme-brightness))
contrast(1.18);
--chat-font: "VT323", "Courier New", Courier, monospace;
position: relative;
background: #050404;
color: var(--terminal-amber);
overflow: hidden;
}
body.chat-shell.hide-mouse-cursor,
body.chat-shell.hide-mouse-cursor * {
cursor: none !important;
}
body.chat-shell::before,
body.chat-shell::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
}
body.chat-shell::before {
background:
repeating-linear-gradient(
to bottom,
rgba(255, 194, 120, 0.05) 0,
rgba(255, 194, 120, 0.05) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
opacity: 0.62;
transform-origin: center;
animation: none;
z-index: 3;
}
body.chat-shell::after {
background:
radial-gradient(circle at center, rgba(255, 190, 95, 0.12) 0%, rgba(245, 155, 47, 0.07) 34%, transparent 72%),
var(--shared-terminal-bg);
filter: hue-rotate(var(--theme-hue-rotate)) brightness(var(--theme-brightness));
opacity: 1;
animation: none;
z-index: 0;
}
body.chat-shell .chat-container {
position: relative;
z-index: 2;
}
/* Shared button/link helpers for info & support actions */
.delete-account-form {
margin: 25px 0;
text-align: center;
}
.delete-account-button {
background-color: #b00020;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 12px 24px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.delete-account-button:hover {
background-color: #d32f2f;
transform: translateY(-1px);
}
.character-meta {
text-align: center;
margin-bottom: 32px;
}
.character-meta p {
margin: 4px 0;
}
.character-meta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 10px;
}
.character-meta-actions a,
.character-meta-actions span {
display: inline-block;
}
.character-preset-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
justify-content: center;
}
.save-counter {
font-weight: 600;
margin: 6px 0 14px;
color: #ffd166;
}
.support-cta {
text-align: center;
margin: 20px 0;
}
.support-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 26px;
border-radius: 999px;
background-color: #f5c542;
color: #1e1e1e;
font-weight: 700;
letter-spacing: 0.4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.support-button:hover {
background-color: #ffd458;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.rename-save-button {
display: inline-block;
padding: 6px 12px;
margin: 2px;
border: none;
border-radius: 4px;
background-color: #3d3d3d;
color: #ffffff;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.rename-save-button:hover {
background-color: #2983dd;
transform: translateY(-1px);
}
.purchase-status {
font-weight: 600;
margin: 12px 0 0;
}
.logout-button {
display: inline-block;
margin: 16px auto 0;
padding: 10px 20px;
border-radius: 6px;
background-color: #2983dd;
color: #ffffff;
text-decoration: none;
font-weight: 600;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.logout-button:hover {
background-color: #1c6fb4;
transform: translateY(-1px);
}
.policy-page {
max-width: 900px;
margin: 40px auto;
padding: 30px;
background-color: #2c2c2c;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
line-height: 1.7;
}
.policy-page h1,
.policy-page h2,
.policy-page h3 {
color: #2983dd;
margin-top: 24px;
}
.policy-page h1 {
margin-top: 0;
text-align: center;
}
.policy-page ul {
padding-left: 20px;
}
.policy-page a {
color: #8dc6ff;
text-decoration: underline;
display: inline;
padding: 0;
margin: 0;
background: none;
border-radius: 0;
font-weight: 600;
}