/* =================================================================
   ui-foundations.css  —  shared CSS for modal, hud toasts, messageLog
   ChumpLife dark/neutral aesthetic
   Z-index: toasts(1000) < msglog(1100) < modal-backdrop(2000) < modal(2001)
   ================================================================= */

:root {
  --ui-bg-primary:     #1a1a2e;
  --ui-bg-panel:       #16213e;
  --ui-bg-input:       #0f3460;
  --ui-bg-deep:        #0d1b2a;
  --ui-border:         #333;
  --ui-border-accent:  #0f3460;
  --ui-text-primary:   #e0e0e0;
  --ui-text-secondary: #aaa;
  --ui-text-muted:     #666;
  --ui-color-accent:   #f0c040;
  --ui-color-success:  #4caf50;
  --ui-color-error:    #e74c3c;
  --ui-color-warn:     #ffb74d;
  --ui-color-info:     #42a5f5;
  --ui-radius:         8px;
  --ui-radius-sm:      4px;
  --ui-font:           'Segoe UI', system-ui, sans-serif;
}

/* =================================================================
   SHARED BUTTON
   ================================================================= */
.ui-btn {
  padding: 9px 20px;
  border: none;
  border-radius: var(--ui-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  font-family: var(--ui-font);
  line-height: 1;
}
.ui-btn:focus-visible { outline: 2px solid var(--ui-color-accent); outline-offset: 2px; }

.ui-btn-primary            { background: var(--ui-color-accent); color: var(--ui-bg-primary); }
.ui-btn-primary:hover      { background: #e0b030; }
.ui-btn-primary.dangerous  { background: var(--ui-color-error); color: #fff; }
.ui-btn-primary.dangerous:hover { background: #c0392b; }

.ui-btn-secondary          { background: transparent; border: 1px solid #555; color: var(--ui-text-secondary); }
.ui-btn-secondary:hover    { border-color: var(--ui-color-accent); color: var(--ui-color-accent); }

/* =================================================================
   MODAL
   ================================================================= */
#ui-modal-root { position: fixed; inset: 0; pointer-events: none; }

.ui-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: all;
}
.ui-modal-backdrop.visible { opacity: 1; }

.ui-modal-dialog {
  background: var(--ui-bg-panel);
  border: 1px solid var(--ui-border-accent);
  border-radius: var(--ui-radius);
  padding: 24px;
  width: 440px;
  max-width: 90vw;
  z-index: 2001;
  transform: scale(0.92) translateY(-10px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.18s ease;
  font-family: var(--ui-font);
  color: var(--ui-text-primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.ui-modal-dialog.visible { transform: scale(1) translateY(0); opacity: 1; }

.ui-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ui-color-accent);
  margin: 0 0 12px;
}

.ui-modal-body {
  font-size: 14px;
  color: var(--ui-text-secondary);
  line-height: 1.55;
  margin-bottom: 18px;
}

.ui-modal-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--ui-bg-input);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-primary);
  font-size: 14px;
  font-family: var(--ui-font);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  margin-bottom: 6px;
}
.ui-modal-input:focus { border-color: var(--ui-color-accent); }

.ui-modal-input-error {
  font-size: 12px;
  color: var(--ui-color-error);
  min-height: 16px;
  margin-bottom: 10px;
}

.ui-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* =================================================================
   HUD TOASTS
   ================================================================= */
#ui-hud-container {
  position: fixed;
  bottom: 24px;
  left: 72px; /* clears msglog toggle: 16px offset + 40px width + 16px gap */
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 88px)); /* 72px left + 16px right margin */
}

.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 13px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-bg-panel);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-border);
  font-size: 13px;
  font-family: var(--ui-font);
  color: var(--ui-text-primary);
  pointer-events: auto;
  cursor: pointer;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  word-break: break-word;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.ui-toast.visible   { transform: translateY(0); opacity: 1; }
.ui-toast.removing  { transform: translateY(14px); opacity: 0; }

.ui-toast[data-level="info"]    { border-left-color: var(--ui-color-info); }
.ui-toast[data-level="success"] { border-left-color: var(--ui-color-success); }
.ui-toast[data-level="warn"]    { border-left-color: var(--ui-color-warn); }
.ui-toast[data-level="error"]   { border-left-color: var(--ui-color-error); }

.ui-toast-icon   { flex-shrink: 0; font-size: 14px; line-height: 1.4; user-select: none; }
.ui-toast-text   { flex: 1; line-height: 1.4; }

.ui-toast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.65;
  transition: opacity 0.15s;
  pointer-events: auto;
  display: none;
}
.ui-toast.sticky .ui-toast-dismiss { display: inline-block; }
.ui-toast-dismiss:hover { opacity: 1; }

/* =================================================================
   MESSAGE LOG
   ================================================================= */
#ui-msglog-toggle {
  position: fixed;
  bottom: 24px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui-bg-panel);
  border: 1px solid var(--ui-border-accent);
  color: var(--ui-text-primary);
  font-size: 18px;
  cursor: pointer;
  z-index: 1101;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
#ui-msglog-toggle:hover { border-color: var(--ui-color-accent); background: var(--ui-bg-input); }
.ui-msglog-toggle--hidden { display: none !important; }

#ui-msglog-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--ui-color-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  font-family: var(--ui-font);
  line-height: 1;
}
#ui-msglog-badge.visible { display: flex; }

#ui-msglog-window {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 400px;
  max-width: 90vw;
  height: 50vh;
  min-height: 240px;
  background: var(--ui-bg-panel);
  border-top: 1px solid var(--ui-border-accent);
  border-right: 1px solid var(--ui-border-accent);
  border-radius: 0 8px 0 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  font-family: var(--ui-font);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.22s ease;
  box-shadow: 2px -2px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
#ui-msglog-window.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

#ui-msglog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-border-accent);
  flex-shrink: 0;
}
#ui-msglog-header-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#ui-msglog-filter {
  padding: 3px 8px;
  background: var(--ui-bg-deep);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-secondary);
  font-size: 12px;
  font-family: var(--ui-font);
  outline: none;
  cursor: pointer;
}
#ui-msglog-filter:focus { border-color: var(--ui-color-accent); }

#ui-msglog-close {
  background: none;
  border: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 5px;
  transition: color 0.15s;
  line-height: 1;
}
#ui-msglog-close:hover { color: var(--ui-text-primary); }

#ui-msglog-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-accent) transparent;
}
#ui-msglog-list::-webkit-scrollbar { width: 4px; }
#ui-msglog-list::-webkit-scrollbar-track { background: transparent; }
#ui-msglog-list::-webkit-scrollbar-thumb { background: var(--ui-border-accent); border-radius: 2px; }

.ui-msglog-entry {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.4;
}
.ui-msglog-entry:hover  { background: rgba(255, 255, 255, 0.03); }
.ui-msglog-entry.hidden { display: none; }

.ui-msglog-entry-ts   { flex-shrink: 0; color: var(--ui-text-muted); font-size: 10px; font-family: monospace; }
.ui-msglog-entry-icon { flex-shrink: 0; font-size: 11px; user-select: none; }
.ui-msglog-entry-text { flex: 1; color: var(--ui-text-secondary); word-break: break-word; }

.ui-msglog-entry[data-source="chat"]   .ui-msglog-entry-text { color: var(--ui-text-primary); }
.ui-msglog-entry[data-source="error"]  .ui-msglog-entry-text { color: var(--ui-color-error); }
.ui-msglog-entry[data-source="npc-bt"] .ui-msglog-entry-text { color: #78a87e; font-family: monospace; font-size: 11px; }
.ui-msglog-entry[data-level="success"] .ui-msglog-entry-text { color: var(--ui-color-success); }
.ui-msglog-entry[data-level="warn"]    .ui-msglog-entry-text { color: var(--ui-color-warn); }
.ui-msglog-entry[data-level="error"]   .ui-msglog-entry-text { color: var(--ui-color-error); }

/* Chat styling — shared by toast and log ─────────────────────────────────── */
.chat-username {
  font-weight: 700;
  /* color set inline per-user via deterministic hash */
}
.chat-body {
  font-weight: 400;
  color: #E6E6E6;
}
/* Toast chat body inherits lighter color from parent */
.ui-toast .chat-body { color: #E6E6E6; }

#ui-msglog-input-row {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--ui-border-accent);
  flex-shrink: 0;
}

#ui-msglog-input {
  flex: 1;
  padding: 7px 10px;
  background: var(--ui-bg-deep);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-primary);
  font-size: 13px;
  font-family: var(--ui-font);
  outline: none;
  transition: border-color 0.15s;
}
#ui-msglog-input:focus { border-color: var(--ui-color-accent); }

#ui-msglog-send {
  padding: 7px 14px;
  background: var(--ui-color-accent);
  color: var(--ui-bg-primary);
  border: none;
  border-radius: var(--ui-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--ui-font);
}
#ui-msglog-send:hover { background: #e0b030; }

/* mobile friendliness */
@media (max-width: 480px) {
  #ui-msglog-window { width: 100vw; max-width: 100vw; border-radius: 0; }
  .ui-modal-dialog  { padding: 18px; }
}