/* The realm's chat, in the side card's fifth tab (js/chat.js): the lines in a dark well cut into the card's planks, names in the
   heads' type (the realm's in gold, yours in ember, everyone else's in a colour of the land), a carved slot to write in, a moss-green
   word for who's about, and a parchment slip pinned on when the realm wants your name. */
#chatHost { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sidetabs button .badge { display: inline-block; margin-left: 5px; padding: 2px 4px 0; border-radius: 3px; vertical-align: 1px; background: linear-gradient(#ffb36a, #d46a20);
  color: #200; font: 14px/1 var(--mono); letter-spacing: 0; text-shadow: none; box-shadow: 0 0 6px rgba(255,138,61,.45), 0 1px 0 #000; }

/* who's about: a lit moss lamp and a word */
.chat-top { display: flex; align-items: center; gap: 7px; padding: 0 2px; font: 700 9.5px var(--head); letter-spacing: .14em; text-transform: uppercase; color: #9a8a6a; }
.chat-top i { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(#d4f0a0, #6f9a3e 70%); box-shadow: 0 0 6px #8fbf5a99, 0 0 0 1px #000; }

/* the lines */
.chat-well { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 8px 6px; border-radius: 3px; background: rgba(0,0,0,.38); box-shadow: var(--carve); }
.chat-lines .cl { padding: 2px 0 3px; font: 14px/1.36 var(--body); color: #cdbf9f; overflow-wrap: anywhere; }
.chat-lines .cl + .cl { border-top: 1px solid rgba(138,106,58,.12); }
.chat-lines .tm { margin-right: 6px; font: 15px var(--mono); color: #6a6252; }
.chat-lines .cn { margin-right: 5px; font: 700 12px var(--head); letter-spacing: .03em; color: #d2bf98; }
.chat-lines .cn::after { content: ":"; color: #6a6252; }
.chat-lines .cl.you .cn { color: #ff9d4d; text-shadow: 0 0 8px rgba(255,138,61,.35); }
.chat-lines .cl.realm { margin: 2px -4px; padding: 3px 4px 4px; border-left: 2px solid rgba(217,176,92,.7); background: linear-gradient(90deg, rgba(217,176,92,.12), transparent 80%); }
.chat-lines .cl.realm .cn { color: var(--gold2); } .chat-lines .cl.realm .cm { color: #ecd394; font-style: italic; }
.chat-lines::-webkit-scrollbar { width: 6px; } .chat-lines::-webkit-scrollbar-thumb { background: #4a3826; border-radius: 3px; }
/* (scrolled up, new lines wait below: a tag to go down to them) */
.chat-more { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 4px 10px 3px; font-size: 9.5px; letter-spacing: .1em;
  background: linear-gradient(#5a3e24, #36241a); border-color: #120a04; color: #f6e2b4; box-shadow: 0 2px 8px #000a; }

/* writing: a slot carved in the wood, and a word of wood to say it (button.wood, the sheets' own, in css/online.css) */
.chat-row { display: flex; gap: 5px; align-items: center; }
.chat-foot { position: relative; }
.chat-in { flex: 1; min-width: 0; padding: 5px 9px; font: 15px var(--body); color: #f2e6c8; background: #0a0806; border: 1px solid #000; border-radius: 3px; box-shadow: var(--carve); }
.chat-in::placeholder { color: #6a5e4a; font-style: italic; } .chat-in:focus { outline: none; box-shadow: var(--carve), 0 0 0 1px rgba(217,176,92,.55); }
.chat-row button.wood { padding: 8px 12px 7px; }
/* the server's word on a line, on a slip just over the box */
.chat-note { position: absolute; left: 2px; right: 2px; bottom: calc(100% + 4px); padding: 4px 9px; border-radius: 3px; font: italic 13px/1.3 var(--body);
  background: linear-gradient(#2c1e14, #1c130c); border: 1px solid #000; box-shadow: 0 0 0 1px rgba(138,106,58,.45), 0 4px 12px #000c; color: #e8d8b4; animation: pop .2s; }
.chat-note.bad { color: #f4a08e; } .chat-note.good { color: #a8e898; }

/* the name, asked for the first time you try to talk: a slip of the sheets' parchment, written on in ink */
.chat-name { padding: 9px 12px 10px; border-radius: 2px; color: #3b2a1c; image-rendering: pixelated; animation: pop .2s;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,250,232,.32), rgba(150,110,60,.18) 85%), url(../art/ui/rs_parchment.png) 0 0 / 128px #d9c79c;
  box-shadow: inset 0 0 0 1px rgba(90,60,30,.55), inset 0 0 18px rgba(110,70,30,.35), 0 0 0 2px #3a2313, 0 6px 16px #000b; }
.chat-name > b { display: block; font: 700 13px var(--head); letter-spacing: .04em; color: #3b2a1c; text-shadow: 0 1px 0 rgba(255,250,230,.5); }
.chat-name > small { display: block; margin: 2px 0 6px; font: italic 13px/1.3 var(--body); color: #6a5838; }
.chat-namein { flex: 1; min-width: 0; padding: 3px 2px 4px; font: 18px var(--body); color: #22160c; background: transparent; border: 0; border-bottom: 1.5px solid #8a6a3a; border-radius: 0; box-shadow: none; outline: none; }
.chat-namein:focus { border-bottom-color: #4f6e2a; }
input.chat-namein { cursor: url(../art/ui/cursor_hand.png) 3 2, text !important; }
.chat-name .ghost { color: #6a5236; text-shadow: none; padding: 8px 6px 7px; }
.chat-err { margin-top: 5px; font: italic 14px/1.3 var(--body); color: #8a2a1a; } .chat-err:empty { display: none; }

/* (room for it: on a short screen the mini map steps aside while the chat is open, and the music's plate, where it starts out at the
   foot of the side, gets a strip of its own under the box instead of sitting on it) */
@media (max-height: 1000px) { #side:has(#chatHost:not([hidden])) #mini { display: none; } }
body:has(#nowplaying:not([hidden]):not([style*="top"])) #chatHost { padding-bottom: 30px; }