/* Dark Mage of Mossfen — the chat box (v0.25). The log panel in the bottom-left corner takes
   typing: the lines scroll in the list, the box sits under them. Loaded after style.css. */
#log {
  width: clamp(200px, calc(50% - 336px), 390px);       /* stops short of the hotbar (nine keys, Skills, Bag) */
  height: 172px;                      /* was 142: the box takes a row */
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: height 0.16s ease-out;
  cursor: text;
}
/* its height is yours (v1.09, Ping's): drag the grip on its top edge (ui/chat-size.js) */
#log.is-sizing { transition: none; }
.log-grip {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 9px;
  cursor: ns-resize; touch-action: none;
}
.log-grip::before {
  content: ''; position: absolute; left: 50%; top: 3px; width: 34px; height: 3px; margin-left: -17px;
  border-radius: 2px; background: var(--edge); transition: background 0.12s;
}
.log-grip:hover::before, #log.is-sizing .log-grip::before { background: var(--edge-strong); }
#log ol {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; scrollbar-width: thin;
  padding: 6px 10px;
  align-content: start;               /* a short log stays at the top instead of stretching its rows */
  overflow-wrap: anywhere;
}
#log .tone-say { color: #ffffff; }                       /* what you say */
#log .tone-gm { color: #e6f06a; }                        /* a GM command's answer */
#log .tone-typed { color: var(--ink-faint); }            /* the command as you typed it */
#log .tone-whisper { color: #f2a7e8; }                   /* a whisper, to you or from you */

#chat {
  flex: none; display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 4px 6px 5px;
  border-top: 1px solid var(--edge);
}
#chat-input {
  flex: 1 1 auto; min-width: 0; height: 24px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 4px;
  background: rgba(0, 0, 0, 0.3); color: var(--ink);
  font: 14px/1 var(--f-body);
  outline: none;
  -webkit-user-select: text; user-select: text;          /* the page turns selecting off; a text box needs it */
}
#chat-input::placeholder { color: var(--ink-faint); opacity: 1; }
#chat-input:focus { border-color: var(--edge-strong); background: rgba(0, 0, 0, 0.55); }
#chat-god {
  flex: none; padding: 3px 6px; border-radius: 3px;
  background: #e6f06a; color: #1b1a08;
  font: 700 11px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase;
}

/* what you say, just over your head (v1.09, Ping's: see-through black, white words, like Ragnarok's;
   the townsfolk keep their paper bubble, shop.css) */
.unit-say {
  position: absolute; left: 0; transform: translate(-50%, -100%);
  width: max-content; max-width: 230px; margin: 0; padding: 3px 8px 4px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font: 500 13.5px/1.3 var(--f-body); text-align: center; overflow-wrap: anywhere;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
  animation: unit-say-in 0.18s ease-out 1;
}
@keyframes unit-say-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 6px)); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}

/* no room beside the hotbar: the panel sits above it, so the box is never under the keys */
@media (max-width: 1075px) {
  #log { bottom: 84px; width: min(300px, calc(100% - 24px)); }
}
@media (max-width: 760px) {
  #log { bottom: 76px; width: calc(100% - 24px); }
  #log { height: 104px; }
  .log-grip { height: 14px; }                         /* a finger's worth */
  .log-grip::before { top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #log { transition: none; }
  .unit-say { animation: none; }
}