:root { --ink:#172d55; --navy:#0b1a38; --paper:#f6f2e8; --blue:#d8e9ff; --line:#86a2c7; --mara:#f8dfc5; --eli:#d6ebd4; --red:#b42f35; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); font:14px/1.35 "Courier New", Courier, monospace; background:radial-gradient(circle at 50% 10%, #355f91 0, #1c416f 30%, #081528 90%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; background:repeating-linear-gradient(0deg, transparent 0 2px, #000 2px 3px); mix-blend-mode:multiply; }
.desktop { min-height:100vh; display:grid; place-content:center; padding:24px; }
.chat-window { width:min(720px, 100%); height:min(760px, calc(100vh - 88px)); min-height:520px; overflow:hidden; border:3px solid #0a1a34; border-radius:7px; background:var(--paper); box-shadow:0 20px 55px #0009, inset 0 0 0 2px #c5dbed; display:grid; grid-template-rows:36px 57px 64px 1fr auto auto; }
.titlebar { display:flex; align-items:center; gap:9px; padding:0 10px; color:white; font-weight:bold; background:linear-gradient(90deg, #142c65, #3979b5); text-shadow:1px 1px #0a193b; }
.app-mark { font-size:17px; color:#ffe76c; }.window-controls { margin-left:auto; display:flex; gap:6px; }.window-controls button { display:grid; place-items:center; width:19px; height:18px; padding:0; border:1px solid #d9edff; color:white; font:14px Arial; background:#214f8c; cursor:pointer; }
.profile-bar,.conversation-head { display:flex; align-items:center; gap:9px; padding:7px 13px; border-bottom:1px solid var(--line); background:#eaf5ff; }.conversation-head { background:linear-gradient(#fff, #e7edf4); }
.profile-bar strong,.conversation-head strong { display:block; font-size:13px; }.status,.conversation-head .profile-link > span:not(.avatar) { display:block; color:#496787; font-size:11px; }.status i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#54a549; }.avatar { width:36px; height:36px; display:grid; place-items:center; border:1px solid #728fb1; border-radius:4px; font-weight:bold; font-size:20px; box-shadow:inset 0 0 0 2px #ffffffaa; }.mara-avatar { background:var(--mara); }.eli-avatar { background:var(--eli); }.profile-link { display:flex; align-items:center; gap:9px; padding:0; border:0; color:inherit; text-align:left; font:inherit; background:transparent; cursor:pointer; }.profile-link:hover strong { text-decoration:underline; } #sound-toggle { margin-left:auto; border:1px solid #7897b9; border-radius:3px; background:white; color:var(--ink); cursor:pointer; }
.messages { overflow-y:auto; padding:15px 18px 25px; background:linear-gradient(90deg, #f8f5ed, #fffdf8 48%, #f8f5ed); scroll-behavior:smooth; }.date { margin:6px 0 15px; text-align:center; font-size:10px; color:#667b90; }.message { max-width:85%; margin:0 0 14px; animation:arrive .24s ease-out; }.message.mara { margin-left:auto; }.meta { margin-bottom:3px; color:#4c6580; font-size:10px; }.mara .meta { text-align:right; }.bubble { padding:8px 10px; border:1px solid #c8b49d; border-radius:4px 4px 0 4px; background:var(--mara); box-shadow:1px 1px #d0b99d; }.eli .bubble { border-color:#a7bda6; border-radius:4px 4px 4px 0; background:var(--eli); box-shadow:1px 1px #acbfaa; }.choice-set { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; margin:8px 0 14px 25%; }.choice { padding:7px 9px; border:1px solid #6585a8; border-radius:3px; color:#163d6b; background:#e8f4ff; font:11px "Courier New", monospace; cursor:pointer; }.choice:hover { background:#cfe7ff; }.typing { min-height:25px; padding:6px 18px; color:#687d90; font-size:11px; background:#fbfaf5; }.typing[aria-hidden="true"] { visibility:hidden; }.typing span { display:inline-block; width:4px; height:4px; margin-right:2px; border-radius:50%; background:#687d90; animation:blink 1s infinite; }.typing span:nth-child(2) { animation-delay:.15s; }.typing span:nth-child(3) { animation-delay:.3s; }
.composer { padding:8px 12px 9px; border-top:1px solid var(--line); background:#d9eafa; }.composer label { display:block; margin-bottom:3px; font-size:10px; }.reply-row { display:flex; gap:7px; }.reply-row input { min-width:0; flex:1; padding:7px; border:1px solid #8098b5; font:13px "Courier New", monospace; }.reply-row button { padding:0 15px; border:1px solid #315a88; color:white; background:linear-gradient(#5c92c5,#2b5b91); font:12px "Courier New", monospace; cursor:pointer; }.composer small { display:block; margin-top:5px; color:#58718e; font-size:10px; }kbd { padding:0 3px; border:1px solid #9aaabd; background:white; }.footer-note { margin:12px 0 0; color:#bbd1e9; font-size:10px; text-align:center; letter-spacing:.06em; }
body.unsettled .titlebar { background:linear-gradient(90deg, #492246, #8c2434); } body.unsettled .messages { background:linear-gradient(90deg, #f8f0e9, #fff8f0); } body.unsettled #connection { color:#ffb3ae; } .system { margin:12px auto; color:var(--red); font-size:11px; text-align:center; letter-spacing:.05em; animation:flicker .35s steps(2) 3; }
@keyframes arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } } @keyframes blink { 50% { opacity:.15; } } @keyframes flicker { 50% { opacity:.15; } }
.reply-row button:disabled,.reply-row input:disabled { cursor:not-allowed; opacity:.55; }
.chat-window.minimized { height:36px; min-height:0; }.chat-window.minimized > :not(.titlebar) { display:none; }.chat-window.maximized { width:min(960px, 100%); height:calc(100vh - 32px); }.modal,.archive-screen { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:#061327aa; }.modal[aria-hidden="true"],.archive-screen[aria-hidden="true"] { display:none; }.profile-card,.password-card { position:relative; width:min(360px, 100%); padding:25px; border:3px solid #0a1a34; background:var(--paper); box-shadow:0 18px 40px #0008; }.profile-card .avatar { width:54px; height:54px; margin-bottom:12px; font-size:27px; }.profile-card h1,.password-card h1 { margin:0; font-size:19px; }.profile-card p,.password-card p { margin:3px 0 18px; color:#56718f; font-size:11px; }.profile-card dl { margin:0; }.profile-card dt { margin-top:12px; color:#527299; font-size:10px; text-transform:uppercase; }.profile-card dd { margin:2px 0; }.modal-close { position:absolute; top:8px; right:8px; width:22px; height:22px; border:1px solid #7897b9; color:var(--ink); background:white; cursor:pointer; }.password-card label,.password-card small { display:block; color:#526f8d; font-size:10px; }.password-card input { width:100%; margin:5px 0 9px; padding:7px; border:1px solid #8098b5; font:14px "Courier New", monospace; }.password-submit { padding:6px 10px; border:1px solid #315a88; color:white; background:#376da4; font:12px "Courier New", monospace; cursor:pointer; }.password-card small { min-height:15px; margin-top:9px; }.archive-window { width:min(820px, 100%); overflow:hidden; border:3px solid #0a1a34; border-radius:6px; background:#f6f2e8; box-shadow:0 18px 45px #0008; }.archive-titlebar { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; color:white; background:linear-gradient(90deg,#142c65,#3979b5); font-weight:bold; }.archive-titlebar button { width:20px; height:20px; border:1px solid #d9edff; color:white; background:#214f8c; cursor:pointer; }.archive-menu,.archive-status { padding:5px 9px; border-bottom:1px solid #98b2cb; background:#edf5fb; color:#45698b; font-size:11px; }.archive-status { border-top:1px solid #98b2cb; border-bottom:0; }.archive-body { display:grid; grid-template-columns:165px 1fr; min-height:380px; }.archive-sidebar { padding:14px 9px; border-right:1px solid #b2c3d4; background:#e7eff7; }.archive-sidebar strong { display:block; margin:6px 5px; color:#55728e; font-size:10px; }.archive-sidebar button { display:block; width:100%; padding:6px 5px; border:0; color:#23496f; text-align:left; font:11px "Courier New", monospace; background:transparent; cursor:pointer; }.archive-sidebar button:hover { background:#d7e9f8; }.archive-sidebar .side-current { border-radius:3px; color:#fff; background:#4b82b8; }.archive-sidebar hr { border:0; border-top:1px solid #bdcbda; }.archive-files { padding:13px; }.archive-path { margin:0 0 13px; color:#617991; font-size:11px; }.file-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.archive-item { min-height:112px; padding:9px 5px; border:1px solid transparent; color:#1f466e; text-align:center; font:11px "Courier New", monospace; background:transparent; cursor:pointer; }.archive-item:hover,.archive-item:focus { border-color:#638db9; background:#e3f1fc; outline:0; }.archive-item span { display:block; margin-bottom:4px; color:#e09c3d; font:bold 29px Arial; }.archive-item strong,.archive-item small { display:block; }.archive-item small { margin-top:4px; color:#587189; font-size:9px; }.current-log { background:#edf7ff; }.archive-message { min-height:18px; margin:14px 0 0; padding:7px; border-top:1px solid #c8d4de; color:#607a94; font-size:10px; } 
.chat-window.minimized { height:36px; min-height:0; }.chat-window.minimized > :not(.titlebar) { display:none; }.chat-window.maximized { width:min(960px, 100%); height:calc(100vh - 32px); }.modal,.archive-screen { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:#061327aa; }.modal[aria-hidden="true"],.archive-screen[aria-hidden="true"] { display:none; }.profile-card,.password-card { position:relative; width:min(360px, 100%); padding:25px; border:3px solid #0a1a34; background:var(--paper); box-shadow:0 18px 40px #0008; }.profile-card .avatar { width:54px; height:54px; margin-bottom:12px; font-size:27px; }.profile-card h1,.password-card h1 { margin:0; font-size:19px; }.profile-card p,.password-card p { margin:3px 0 18px; color:#56718f; font-size:11px; }.profile-card dl { margin:0; }.profile-card dt { margin-top:12px; color:#527299; font-size:10px; text-transform:uppercase; }.profile-card dd { margin:2px 0; }.modal-close { position:absolute; top:8px; right:8px; width:22px; height:22px; border:1px solid #7897b9; color:var(--ink); background:white; cursor:pointer; }.password-card label,.password-card small { display:block; color:#526f8d; font-size:10px; }.password-card input { width:100%; margin:5px 0 9px; padding:7px; border:1px solid #8098b5; font:14px "Courier New", monospace; }.password-submit { padding:6px 10px; border:1px solid #315a88; color:white; background:#376da4; font:12px "Courier New", monospace; cursor:pointer; }.password-card small { min-height:15px; margin-top:9px; }.archive-window { width:min(820px, 100%); overflow:hidden; border:3px solid #0a1a34; border-radius:6px; background:#f6f2e8; box-shadow:0 18px 45px #0008; }.archive-titlebar { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; color:white; background:linear-gradient(90deg,#142c65,#3979b5); font-weight:bold; }.archive-titlebar button { width:20px; height:20px; border:1px solid #d9edff; color:white; background:#214f8c; cursor:pointer; }.archive-menu,.archive-status { padding:5px 9px; border-bottom:1px solid #98b2cb; background:#edf5fb; color:#45698b; font-size:11px; }.archive-status { border-top:1px solid #98b2cb; border-bottom:0; }.archive-body { display:grid; grid-template-columns:165px 1fr; min-height:380px; }.archive-sidebar { padding:14px 9px; border-right:1px solid #b2c3d4; background:#e7eff7; }.archive-sidebar strong { display:block; margin:6px 5px; color:#55728e; font-size:10px; }.archive-sidebar button { display:block; width:100%; padding:6px 5px; border:0; color:#23496f; text-align:left; font:11px "Courier New", monospace; background:transparent; cursor:pointer; }.archive-sidebar button:hover { background:#d7e9f8; }.archive-sidebar .side-current { border-radius:3px; color:#fff; background:#4b82b8; }.archive-sidebar hr { border:0; border-top:1px solid #bdcbda; }.archive-files,.board-view { padding:13px; }.archive-path { margin:0 0 13px; color:#617991; font-size:11px; }.file-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.archive-item { min-height:112px; padding:9px 5px; border:1px solid transparent; color:#1f466e; text-align:center; font:11px "Courier New", monospace; background:transparent; cursor:pointer; }.archive-item:hover,.archive-item:focus { border-color:#638db9; background:#e3f1fc; outline:0; }.archive-item span { display:block; margin-bottom:4px; color:#e09c3d; font:bold 29px Arial; }.archive-item strong,.archive-item small { display:block; }.archive-item small { margin-top:4px; color:#587189; font-size:9px; }.current-log { background:#edf7ff; }.archive-message { min-height:18px; margin:14px 0 0; padding:7px; border-top:1px solid #c8d4de; color:#607a94; font-size:10px; }.board-back { padding:0; border:0; color:#2e6597; text-decoration:underline; font:11px "Courier New", monospace; background:transparent; cursor:pointer; }.board-view h1 { margin:12px 0 1px; font-size:17px; }.board-subtitle { margin:0 0 12px; color:#5f7890; font-size:10px; }.board-post { padding:10px 0; border-top:1px solid #c4d1dc; }.board-post header { display:flex; justify-content:space-between; color:#4e7193; font-size:10px; }.board-post h2 { margin:4px 0; font-size:12px; }.board-post p { margin:0 0 5px; font-size:11px; }.board-post small { color:#657f96; font-size:9px; }
@media (max-width:560px) { .desktop { width:100%; max-width:100vw; padding:10px; }.chat-window { height:calc(100vh - 52px); }.profile-bar { padding-left:9px; }.messages { padding:12px; }.message { max-width:92%; }.reply-row input { font-size:16px; }.archive-screen { align-items:start; padding:10px; overflow:auto; }.archive-body { grid-template-columns:1fr; }.archive-sidebar { display:none; }.file-grid { grid-template-columns:repeat(2,1fr); }.archive-item { min-height:98px; } }
.directory-view { padding:13px; }.directory-view h1 { margin:12px 0 1px; font-size:17px; }.directory-search { display:block; margin:15px 0 7px; color:#506f8d; font-size:10px; }.directory-search input { display:block; width:100%; margin-top:4px; padding:7px; border:1px solid #8098b5; font:13px "Courier New", monospace; }.directory-count { margin:7px 0; color:#637d95; font-size:10px; }.directory-results { border-top:1px solid #c4d1dc; }.resident { display:block; width:100%; padding:9px 7px; border:0; border-bottom:1px solid #d1dbe4; color:#244d76; text-align:left; font:12px "Courier New", monospace; background:transparent; cursor:pointer; }.resident:hover { background:#e3f1fc; }.resident strong,.resident span { display:block; }.resident span { margin-top:2px; color:#617a91; font-size:10px; }.directory-empty { padding:12px 0; color:#607990; font-size:11px; }
@media (max-width:560px) { .directory-search input { font-size:16px; } }