/* 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;
}
/* reading back or typing: the panel grows (never into the status window above it) */
#log:hover, #log:focus-within { height: max(172px, min(310px, calc(100% - 270px))); }
#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, over your head (the townsfolk's bubble, shop.css) */
.unit-say {
  position: absolute; left: 0; transform: translate(-50%, -100%);
  width: max-content; max-width: 250px; margin: 0; padding: 6px 11px; border-radius: 9px;
  background: rgba(248, 240, 218, 0.97); color: #2a2118; border: 1px solid #1b140f;
  font: 500 13.5px/1.3 var(--f-body); text-align: center; overflow-wrap: anywhere;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: unit-say-in 0.18s ease-out 1;
}
.unit-say::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: rgba(248, 240, 218, 0.97); border-right: 1px solid #1b140f; border-bottom: 1px solid #1b140f; transform: rotate(45deg);
}
@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)); }
  #log:hover, #log:focus-within { height: max(172px, min(310px, calc(100% - 348px))); }
}
@media (max-width: 760px) {
  #log { bottom: 76px; width: calc(100% - 24px); }
  #log, #log:hover { height: 104px; }
  #log:focus-within { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  #log { transition: none; }
  .unit-say { animation: none; }
}