.terminal { min-height:min(48rem,calc(100svh - 3rem)); }
.mode-row { grid-template-columns:1fr 1fr 2.4fr .8fr; }
.mode-row a,.mode-row button { display:flex; align-items:flex-end; justify-content:flex-end; gap:.5rem; padding:.8rem; background:var(--coral); color:var(--black); font:800 .82rem ui-monospace,monospace; text-transform:uppercase; text-decoration:none; border:2px solid var(--keyline); clip-path:var(--corner-cut); }
.mode-row a[aria-current="page"] { background:var(--gold); }
.mode-row a:hover,.mode-row button:hover { background:var(--cream); }
.mode-row #signout:disabled { opacity:1; background:var(--coral); cursor:default; }
.mode-row span { display:contents; font:inherit; padding:0; box-shadow:none; }
.app-content { padding:2rem 4.4rem 2.5rem 2rem; min-height:34rem; animation:none; }
#screen { min-width:0; }
h1 { font-size:clamp(2.8rem,7vw,5rem); }
h2 { font:500 2.3rem Impact,'Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.03em; margin:0 0 1.2rem; }
h3 { margin:0; font-size:.95rem; overflow-wrap:anywhere; }
p { line-height:1.55; }
button,input,textarea { font:inherit; }
button,.button { cursor:pointer; border:2px solid var(--keyline); background:var(--periwinkle); color:var(--black); padding:.65rem .9rem; font-size:.75rem; font-weight:800; text-decoration:none; text-transform:uppercase; }
button:hover,.button:hover { background:var(--cream); }
button:disabled { cursor:default; opacity:.45; }
button.primary,.button.primary { background:var(--gold); }
button.danger { background:var(--coral); }
:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }
input,textarea { width:100%; min-width:0; background:#152018; color:var(--cream); border:1px solid var(--periwinkle); padding:.7rem; border-radius:0; }
textarea { resize:vertical; min-height:5rem; }
label { display:block; color:var(--periwinkle); font-size:.75rem; margin:1rem 0 .5rem; }
small,.muted { color:var(--periwinkle); font-size:.75rem; line-height:1.5; }
.stack { display:grid; gap:.75rem; }
.row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.spread { justify-content:space-between; }
.form { max-width:32rem; }
.welcome { padding:3rem 0; max-width:42rem; }
.welcome .button { display:inline-block; margin:1.5rem 0; }
.welcome p { color:var(--periwinkle); }
#notice:not(:empty) { border-left:3px solid var(--gold); padding:.6rem .9rem; margin-bottom:1rem; background:#223126; font-size:.82rem; overflow-wrap:anywhere; }
.messenger { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:1.4rem; }
.conversation-list { border-right:1px solid #435345; padding-right:1.2rem; min-width:0; }
.contact-card { display:block; width:100%; text-align:left; background:#24342a; color:var(--cream); border:1px solid #4a5d50; margin-bottom:.5rem; padding:.8rem; text-transform:none; }
.contact-card:hover,.contact-card.selected { background:#38493b; border-color:var(--gold); }
.contact-card strong { display:block; overflow-wrap:anywhere; }
.contact-card small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:.35rem; }
.badge { color:var(--gold); float:right; }
.chat-header { padding-bottom:.8rem; border-bottom:1px solid #435345; margin-bottom:.8rem; }
.chat-header p { margin:.3rem 0 0; }
#ping-status { transition:color .15s ease; }
#ping-status.is-pinging { color:var(--gold); }
.chat-empty { padding:3rem 1rem; }
.message-list { display:grid; align-content:start; gap:.65rem; min-height:14rem; padding:.5rem 0 1rem; }
.message { max-width:90%; padding:.65rem .8rem; background:#2a3b30; border-left:2px solid var(--periwinkle); justify-self:start; overflow-wrap:anywhere; min-width:0; }
.message.mine { justify-self:end; background:#3a3b28; border-left:0; border-right:2px solid var(--gold); }
.message p { margin:0; white-space:pre-wrap; font-size:.88rem; }
.message time { display:block; margin-top:.4rem; font-size:.6rem; color:var(--periwinkle); }
.message a { color:var(--gold); text-underline-offset:3px; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.8rem 0; }
.pagination button { padding:.4rem .65rem; font-size:.65rem; }
.retention { display:block; font-size:.65rem; margin:.8rem 0; }
.composer { border-top:1px solid #435345; padding-top:.5rem; }
.composer label { margin-top:.3rem; }
.composer .row { margin-top:.55rem; }
.composer .hint { margin-left:auto; }
.chat,.composer { min-width:0; }
.emoji-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.35rem; padding:.7rem; margin:.6rem 0; border:1px solid var(--periwinkle); background:#23332a; width:100%; max-width:24rem; min-width:0; }
.emoji-picker button { min-width:0; min-height:2.75rem; padding:.25rem; display:grid; place-items:center; background:#344639; }
.emoji { display:inline-block; width:1.6em; height:1.6em; vertical-align:-.35em; position:relative; overflow:hidden; }
.emoji img { position:absolute; max-width:none; width:421.0526%; height:421.0526%; left:calc(-6.5789% - var(--col)*99.671%); top:calc(-46.0526% - var(--row)*110.197%); }
.emoji-picker .emoji { font-size:1.25rem; }
.contact-item { padding:1rem; border:1px solid #435345; background:#1c2b21; }
.contact-item p { margin:.3rem 0; }
.section-title { color:var(--gold); font-size:.75rem; text-transform:uppercase; margin:1.8rem 0 .8rem; }
.back-button { display:none; }
[hidden] { display:none!important; }
.online { white-space:nowrap; }
.terminal-footer a.footer-text { height:2rem; box-shadow:inset 0 0 0 2px var(--keyline); background:var(--periwinkle); text-decoration:none; }
.terminal-footer a.footer-text:hover { background:var(--cream); }
@media(max-width:38rem) {
  .terminal-header { row-gap:.15rem; }
  .terminal-header .identity { grid-column:2; grid-row:1; }
  .terminal-header .online { display:block; grid-column:2; grid-row:2; font-size:.55rem; }
  .terminal-header .cap:first-child { grid-column:1; grid-row:1 / 3; height:100%; }
  .terminal-header .cap:last-child { grid-column:3; grid-row:1 / 3; height:100%; }
}
@media(max-width:38rem) { .emoji-picker { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:52rem) { .messenger { grid-template-columns:12rem minmax(0,1fr); gap:1rem; } .app-content { padding-left:1rem; } }
@media(max-width:38rem) { .mode-row { grid-template-columns:1fr 1fr 1fr; gap:.25rem; } .mode-row a,.mode-row button { font-size:.65rem; padding:.6rem .4rem; } .mode-row #signout { display:none; } .app-content { padding:1.5rem 2rem 2rem .75rem; } .messenger { display:block; } .conversation-list { padding:0; border:0; } .messenger.has-chat .conversation-list { display:none; } .messenger:not(.has-chat) .chat { display:none; } .back-button { display:inline-block; } .message { max-width:95%; } .welcome { padding:2rem 0; } }