/* Combat screen: hotbar floating over the battlefield, chat/log dock underneath.
   Loaded after hotbar.css. */

/* ---- Main column: arena on top, dock below ---- */
.hunt-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}
.hunt-main > .hunt-arena { flex: 1 1 auto; min-height: 0; }
.hunt-arena .hunt-stage { flex: 1 1 auto; }

/* ---- Hotbar floats over the bottom of the battlefield ---- */
@media (min-width: 961px) {
  .hunt-hotbar-row {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    margin-top: calc(-1 * (var(--slot, 62px) + 66px));
    padding: 0 12px 12px;
    pointer-events: none;
  }
  .hunt-hotbar-row > * { pointer-events: auto; }
  .hunt-hotbar-row .hunt-hotbar { --slot: clamp(54px, 4vw, 66px); }
  .hunt-hotbar-row .hot-tray {
    background: linear-gradient(180deg, #281e1ed9, #140f0fe6);
    backdrop-filter: blur(3px);
  }
  .hunt-hotbar-row .hot-energy { box-shadow: inset 0 1px 3px #000a, 0 2px 8px #000a; }
  /* Darken the ground behind the tray so it reads on any background */
  .hunt-arena .hunt-stage::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 0 0 0;
    height: 22%;
    background: linear-gradient(180deg, #0000, #0a0808b3);
    pointer-events: none;
  }
  /* The status line moves into the Combat tab of the dock */
  .hunt-arena .hunt-action-deck { display: none; }
}

/* Automation gear at the end of the tray */
.hot-gear-cell { width: calc(var(--slot) * .72); }
.hot-gear-cell .hot-name { max-width: none; }
.hot-gear {
  display: grid;
  place-items: center;
  width: calc(var(--slot) * .72);
  height: var(--slot);
  margin: 0;
  padding: 0;
  border: 1px solid #4d3a38;
  border-radius: 9px;
  background: linear-gradient(160deg, #201818, #100d0d);
  color: #cdbfae;
  font-size: calc(var(--slot) * .36);
  cursor: pointer;
}
.hot-gear:hover { border-color: #e5dacd; color: #e6dace; }
.hot-gear-cell .hot-name { color: #8e7776; }

/* ---- Dock ---- */
.hunt-dock {
  flex: 0 0 clamp(168px, 23vh, 250px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.dock-tabs {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid #3e3130;
  background: linear-gradient(#1d1717, #171111);
}
.dock-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #a8998c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
}
.dock-tabs button:hover { color: #e6dace; }
.dock-tabs button.active { color: #e1d4c5; border-bottom-color: #dbcbb8; background: linear-gradient(#dbcbb800, #dbcbb814); }
.dock-badge {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #a93236;
  color: #f3eee8;
  font-size: 10px;
  line-height: 1;
}

.dock-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dock-feed {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px 12px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #4e2226 transparent;
  font-size: 12.5px;
  line-height: 1.45;
}
.dock-line, .dock-chat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  color: #d9ccb2;
}
.dock-line time, .dock-chat time {
  flex: 0 0 auto;
  color: #77605f;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.dock-icon { flex: 0 0 14px; color: #9f7c7a; text-align: center; }
.dock-line.event-crit { color: #d0bca5; }
.dock-line.event-crit .dock-icon { color: #d0bca5; }
.dock-line.event-hurt { color: #e7a197; }
.dock-line.event-hurt .dock-icon { color: #e07a6c; }
.dock-line.event-heal { color: #c5e3a3; }
.dock-line.event-heal .dock-icon { color: #9ed479; }
.dock-line.event-miss { color: #a59c8b; }
.dock-line.event-loot { color: #d8c7b4; }
.dock-line.event-loot .dock-icon { color: #c23a3a; }
.dock-line.event-defeat { color: #c4b8a0; }
.dock-line.event-ability .dock-icon { color: #b7a0ff; }

.dock-chat strong { flex: 0 0 auto; color: #dbcbb8; font-weight: 700; }
.dock-chat strong::after { content: ":"; color: #77605f; }
.dock-chat.self strong { color: #9fd6c8; }
.dock-chat span { min-width: 0; overflow-wrap: anywhere; }

.dock-empty { padding: 10px 0; color: #8b6d6b; font-style: italic; }
.dock-locked {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  color: #a8998c;
  font-size: 13px;
  text-align: center;
}
.dock-locked p { margin: 0; }

.dock-compose {
  display: flex;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid #332828;
  background: #141111;
}
.dock-compose input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #433433;
  border-radius: 6px;
  background: #0d0a0a;
  color: #e7ddd1;
  font-size: 13px;
}
.dock-compose input:focus { outline: none; border-color: #dbcbb8; box-shadow: 0 0 0 2px #dbcbb826; }
.dock-compose button {
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid #7a161c;
  border-radius: 6px;
  background: linear-gradient(#4a1418, #2a1012);
  color: #e9dfd3;
  font-size: 12px;
  font-weight: 700;
}

/* ---- Narrow screens: hotbar sits under the battlefield, dock stays below ---- */
@media (max-width: 960px) {
  .hunt-hotbar-row { display: flex; justify-content: center; padding: 10px 8px 2px; background: radial-gradient(ellipse at 50% 0, #2a2121, #130f0f 75%); }
  .hunt-arena .hunt-action-deck .hunt-hotbar { display: none; }
  .hunt-dock { flex-basis: 220px; }
  .dock-tabs button { padding: 0 10px; }
}

/* ---- Global chat and whispers ---- */
.dock-name {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #dbcbb8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.dock-name { min-height: 0; height: auto; line-height: inherit; border-radius: 0; }
.dock-name::after { content: ":"; color: #77605f; }
.dock-name:hover { color: #e0d3c4; text-decoration: underline; }
.dock-chat em { flex: 0 0 auto; color: #b48ad8; font-size: 11px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.dock-chat.whisper span { color: #e3d2f2; }
.dock-chat.whisper .dock-name, .dock-chat.whisper strong { color: #cfa6f0; }
.dock-tabs .dock-mutes { margin-left: auto; color: #8f7270; font-size: 11px; font-weight: 600; }
.dock-compose .dock-to { flex: 0 0 140px; color: #cfa6f0; }
.dock-loading { padding: 10px 12px; }
.chat-mute-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.chat-mute-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border: 1px solid #3e3130; border-radius: 6px; }
@media (max-width: 960px) {
  .dock-tabs { overflow-x: auto; scrollbar-width: none; }
  .dock-tabs button { flex: 0 0 auto; }
  .dock-compose .dock-to { flex-basis: 96px; }
}

/* ---- The dock on every other screen (replaces the old journal strip) ---- */
@media (min-width: 961px) {
  #app:not([data-view="combat"]) { grid-template-rows: 46px minmax(0, 1fr) clamp(170px, 22vh, 240px); }
  #app.dock-collapsed:not([data-view="combat"]) { grid-template-rows: 46px minmax(0, 1fr) 46px; }
  #app:not([data-view="combat"]) #journal {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0 12px 10px;
    overflow: hidden;
    border: 0;
    background: none;
  }
  #app:not([data-view="combat"]) #journal > .hunt-dock { height: 100%; }
}
.hunt-dock.is-collapsed .dock-body,
.hunt-dock.is-collapsed .dock-compose { display: none; }
.hunt-main > .hunt-dock.is-collapsed { flex-basis: auto; }
.hunt-dock.is-collapsed .dock-tabs { border-bottom: 0; }
.dock-tabs .dock-collapse {
  min-width: 34px;
  margin-left: auto;
  padding: 0 10px;
  color: #a8998c;
  font-size: 14px;
}
.dock-tabs .dock-mutes + .dock-collapse { margin-left: 4px; }
.dock-tag {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 1px solid #3e3130;
  border-radius: 4px;
  color: #a8998c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.dock-line.event-level .dock-tag { color: #b6e08f; border-color: #4f6a3c; }
.dock-line.event-loot .dock-tag { color: #c23a3a; border-color: #67181d; }
.dock-line.event-danger .dock-tag, .dock-line.event-combat .dock-tag { color: #e7a197; border-color: #6a3a33; }