/* Webclient CSS - Extracted from webclient-pure.html */

/* Load Bitstream Vera Sans Mono from local file */
@font-face {
  font-family: 'Bitstream Vera Sans Mono';
  src: url('/static/fonts/BitstreamVeraSansMono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Load JetBrains Mono NL from local file */
@font-face {
  font-family: 'JetBrains Mono NL';
  src: url('/static/fonts/JetBrainsMonoNL-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'JetBrains Mono NL', 'JetBrains Mono', monospace;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
  position: relative;
  overflow: hidden;
}

#main-container {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background-color: #1a1815;
}


#terminal {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  padding-left: 6px;
}

/* Hide xterm.js cursor completely */
#terminal .xterm-cursor,
#terminal .xterm-cursor-layer {
  display: none !important;
  visibility: hidden !important;
}

/* Hide native scrollbar - xterm.js renders its own custom scrollbar overlay */
#terminal .xterm .xterm-viewport {
  overflow-y: scroll !important;
  scrollbar-width: none !important;
}
#terminal .xterm .xterm-viewport::-webkit-scrollbar {
  display: none !important;
}

#prompt-bar {
  display: none;
  padding: 6px 10px 2px 10px;
  background-color: #111010;
  border-top: 1px solid #3a3530;
  font-size: var(--terminal-font-size, 12px);
  color: #c0c0c0;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

#prompt-bar.visible {
  display: flex;
}

/* Prompt bar hidden until logged into game - overrides .visible */
#prompt-bar.prompt-bar-inactive {
  display: none !important;
}

#prompt-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#prompt-line2 {
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prompt bar content - stacks vertically: vitals, gauges, worth */
#pb-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#pb-gauge-section {
  display: flex;
  gap: 6px;
}

#pb-gauge-section .gauge-bar {
  flex: 1 1 0;
  max-width: 300px;
  margin-top: 0;
}

.pb-hidden {
  display: none !important;
}

/* Prompt bar gauge colors (match combat widget) */
#pb-gauge-hp { background: rgba(180, 50, 50, 0.2); }
#pb-gauge-hp-fill { background: rgba(200, 60, 60, 0.6); }
#pb-gauge-hp.gauge-hp-mid #pb-gauge-hp-fill { background: rgba(220, 120, 40, 0.6); }
#pb-gauge-hp.gauge-hp-low #pb-gauge-hp-fill { background: rgba(240, 50, 50, 0.7); }
#pb-gauge-ae { background: rgba(120, 50, 160, 0.2); }
#pb-gauge-ae-fill { background: rgba(140, 70, 200, 0.6); }
#pb-gauge-enemy { background: rgba(180, 50, 50, 0.2); }
#pb-gauge-enemy-fill { background: rgba(200, 60, 60, 0.6); }
#pb-gauge-balance { background: rgba(40, 80, 160, 0.2); }
#pb-gauge-balance-fill { background: rgba(60, 110, 200, 0.6); }
#pb-gauge-balance.gauge-balance-draining #pb-gauge-balance-fill { background: rgba(50, 90, 160, 0.5); }

/* Prompt bar settings button and dropdown */
#pb-settings-wrapper {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}

#pb-settings-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

#pb-settings-btn:hover {
  color: #ccc;
}

#pb-settings-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: #2a2520;
  border: 1px solid #3a3530;
  border-radius: 6px;
  padding: 6px 10px;
  z-index: 100;
  white-space: nowrap;
}

#pb-settings-menu label {
  display: block;
  color: #c0c0c0;
  font-size: 12px;
  padding: 3px 0;
  cursor: pointer;
  user-select: none;
}

#pb-settings-menu label:hover {
  color: #c4a35a;
}

#pb-settings-menu input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #333;
  position: relative;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

#pb-settings-menu input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  top: -1px;
  left: 1px;
  font-size: 12px;
  color: #c4a35a;
  font-weight: bold;
}

.pb-settings-hidden {
  display: none !important;
}

.pb-settings-visible {
  display: block !important;
}

/* Gauge bars (inside combat widget) */
.gauge-bar {
  position: relative;
  width: 100%;
  height: 16px;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 3px;
}

.gauge-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.gauge-bar-fill.gauge-no-transition {
  transition: none !important;
}

#combat-panel.combat-inactive {
  opacity: 0.5;
}

.gauge-bar.gauge-dimmed {
  opacity: 0.5;
}

.gauge-bar-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: 'JetBrains Mono NL', monospace;
  color: #ddd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 1;
}

/* HP gauge colors */
#gauge-hp { background: rgba(180, 50, 50, 0.2); }
#gauge-hp-fill { background: rgba(200, 60, 60, 0.6); }
#gauge-hp.gauge-hp-mid #gauge-hp-fill { background: rgba(220, 120, 40, 0.6); }
#gauge-hp.gauge-hp-low #gauge-hp-fill { background: rgba(240, 50, 50, 0.7); }

/* AE gauge color */
#gauge-ae { background: rgba(120, 50, 160, 0.2); }
#gauge-ae-fill { background: rgba(140, 70, 200, 0.6); }

/* Enemy gauge colors (dynamic per-enemy gauges in combat widget) */
.combat-enemy-gauge-bar { background: rgba(180, 50, 50, 0.2); }
.combat-enemy-gauge-bar .gauge-bar-fill { background: rgba(200, 60, 60, 0.6); }

/* Balance gauge colors */
#gauge-balance { background: rgba(40, 80, 160, 0.2); }
#gauge-balance-fill { background: rgba(60, 110, 200, 0.6); }
#gauge-balance.gauge-balance-draining #gauge-balance-fill { background: rgba(50, 90, 160, 0.5); }

#input-area {
  display: flex;
  padding: 4px 10px 6px 10px;
  background-color: #111010;
  flex-shrink: 0;
}

/* Dockview fills the iframe viewport */
#dockview-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Theme overrides to match MUD gold/brown palette */
  --dv-tabs-and-actions-container-font-size: 11px;
  --dv-tabs-and-actions-container-height: 24px;
  --dv-tab-font-size: 11px;
  --dv-group-view-background-color: #1e1e1e;
  --dv-tabs-and-actions-container-background-color: #1a1815;
  /* All tab states use the same colors - no active/inactive distinction */
  --dv-activegroup-visiblepanel-tab-background-color: #1a1815;
  --dv-activegroup-hiddenpanel-tab-background-color: #1a1815;
  --dv-inactivegroup-visiblepanel-tab-background-color: #1a1815;
  --dv-inactivegroup-hiddenpanel-tab-background-color: #1a1815;
  --dv-activegroup-visiblepanel-tab-color: #c4a35a;
  --dv-activegroup-hiddenpanel-tab-color: #c4a35a;
  --dv-inactivegroup-visiblepanel-tab-color: #c4a35a;
  --dv-inactivegroup-hiddenpanel-tab-color: #c4a35a;
  --dv-tab-divider-color: #1a1815;
  --dv-separator-border: transparent;
  --dv-floating-box-shadow: none;
}

/* Blur webclient when disconnected */
#dockview-container.webclient-disconnected {
  filter: blur(4px) brightness(0.4);
  pointer-events: none;
}

/* Default font and scrollbar for all Dockview panel content */
#dockview-container .dv-content-container {
  font-family: 'JetBrains Mono NL', 'JetBrains Mono', monospace;
  color: #ddd;
  scrollbar-width: thin;
  scrollbar-color: #3a3530 #1e1e1e;
}

#dockview-container .dv-content-container::-webkit-scrollbar {
  width: 5px;
}

#dockview-container .dv-content-container::-webkit-scrollbar-track {
  background: #1e1e1e;
}

#dockview-container .dv-content-container::-webkit-scrollbar-thumb {
  background: #3a3530;
  border-radius: 4px;
}

#dockview-container .dv-content-container::-webkit-scrollbar-thumb:hover {
  background: #4a4540;
}

/* Map panel - no scrollbar */
#map-render {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

#map-render::-webkit-scrollbar {
  display: none !important;
}

/* All widget content uses --widget-font-size variable (set by font size dropdown) */
#items-equipment,
#items-inventory,
#items-keychain,
#affects-panel,
#combat-panel,
#comm-output {
  font-size: var(--widget-font-size, 11px);
}

/* Override text elements to inherit widget font size (not gauge bars) */
.eq-header, .eq-label, .eq-value,
.inv-row, .inv-empty, .inv-footer,
.key-row, .key-empty,
.aff-header-name, .aff-header-duration, .aff-name, .aff-duration, .aff-empty,
.combat-section-header, .combat-enemy-name,
.chat-window p, .chat-window span {
  font-size: inherit !important;
}


/* Terminal group: hide close button and match terminal background */
.terminal-group .dv-default-tab-action {
  display: none !important;
}
.terminal-group .dv-content-container,
.terminal-group {
  background-color: #111010 !important;
}

/* Terminal panel layout inside Dockview */
#terminal-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #111010;
}

#terminal-panel #terminal {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Force xterm.js container to fill available space and match terminal background */
#terminal .xterm {
  height: 100% !important;
}
#terminal,
#terminal .xterm,
#terminal .xterm-viewport,
#terminal .xterm-screen {
  background-color: #111010 !important;
}

/* Match original WinBox header font and force uniform tab color */
#dockview-container .dv-tab {
  font-family: 'JetBrains Mono NL', 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #8a7a4a !important;
  background-color: #1a1815 !important;
  border-radius: 4px 4px 0 0;
  margin: 2px 1px 0 1px;
}

/* Active tab gets brighter text to show which tab is selected */
#dockview-container .dv-tab.dv-active-tab {
  color: #c4a35a !important;
  background-color: #1e1e1e !important;
}

/* Force compact tab header height */
#dockview-container .dv-tabs-and-actions-container {
  height: 24px !important;
  min-height: 24px !important;
}

/* Compact close button */
#dockview-container .dv-default-tab-action {
  width: 14px !important;
  height: 14px !important;
}

#dockview-container .dv-default-tab-action svg {
  width: 9px !important;
  height: 9px !important;
}



/* Hide Dockview watermark (empty state) */
#dockview-container .dv-watermark {
  display: none;
}

/* Map panel - hide scrollbars, allow canvas to fill */
#map-render {
  overflow: hidden !important;
}


/* Floating panels: flat, no shadow or border */
#dockview-container .dv-resize-container {
  box-shadow: none !important;
  border: none !important;
}

/* Tab right-click context menu */
.tab-context-menu {
  display: none;
  position: fixed;
  background: #2a2520;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 4px 0;
  min-width: 70px;
  z-index: 99999;
}

.tab-context-menu.show {
  display: block;
}

.tab-context-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #e8dcc8;
  padding: 4px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}

.tab-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #c4a35a;
}

/* Map area toggle button - floats over top-left of map */
#map-area-toggle {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 3px 8px;
  font-size: 10px;
  color: #c4a35a;
  background: #1e1916;
  border: 1px solid #444444;
  border-radius: 3px;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

#map-area-toggle:hover {
  background: #2a2520;
}

/* Map area dropdown - floats below toggle */
.map-area-dropdown {
  display: none;
  position: absolute;
  top: 26px;
  left: 4px;
  background: #1e1916;
  border: 1px solid #444444;
  border-radius: 4px;
  max-height: calc(100% - 30px);
  min-width: 160px;
  overflow-y: auto;
  z-index: 10;
  scrollbar-width: thin;
  scrollbar-color: #3a3530 transparent;
}

.map-area-dropdown.show {
  display: block;
}

/* Map zoom toggle button - top-right of map */
#map-zoom-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 3px 8px;
  font-size: 10px;
  color: #c4a35a;
  background: #1e1916;
  border: 1px solid #444444;
  border-radius: 3px;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

#map-zoom-toggle:hover {
  background: #2a2520;
}

/* Map zoom dropdown */
.map-zoom-dropdown {
  display: none;
  position: absolute;
  top: 26px;
  right: 4px;
  background: #1e1916;
  border: 1px solid #444444;
  border-radius: 4px;
  min-width: 70px;
  z-index: 10;
}

.map-zoom-dropdown.show {
  display: block;
}

.map-zoom-dropdown-item {
  padding: 4px 12px;
  color: #e8dcc8;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.map-zoom-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.map-zoom-dropdown-item.current {
  color: #c4a35a;
  font-weight: bold;
}

.widget-zone-menu-item {
  padding: 6px 12px;
  color: #e8dcc8;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.widget-zone-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.widget-zone-menu-item.current {
  color: #c4a35a;
  font-weight: bold;
}

.widget-zone-menu-loading,
.widget-zone-menu-empty,
.widget-zone-menu-error {
  padding: 6px 12px;
  color: #888;
  font-size: 11px;
}

.widget-zone-menu-error {
  color: #f88;
}

#command-input {
  flex: 1;
  padding: 10px;
  font-size: var(--terminal-font-size, 12px);
  font-family: var(--terminal-font-family, 'JetBrains Mono NL', monospace);
  border: none;
  background-color: #333;
  color: white;
  border-radius: 5px;
}
#command-input:focus {
  outline: none;
}

/* FLOATING CONNECT BUTTON IN THE CENTER */
#connect-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;

  /* Larger styling */
  padding: 20px 40px;
  font-size: 20px;

  background-color: #555;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;

  /* Keep the original pulsing effect */
  animation: pulse 1s infinite alternate;
}
#connect-button:disabled {
  color: #888;
  pointer-events: none;
  animation: none;
  background-color: #555;
  cursor: not-allowed;
}
@keyframes pulse {
  0% {
    background-color: #555;
    color: white;
  }
  100% {
    color: #d17a7a;
    background-color: #9f4a4a;
  }
}

/* The floating menu container - hidden, sound controlled from site nav */
#floating-menu {
  display: none !important;
}
#floating-menu h3 {
  color: #fff;
  margin-bottom: 10px;
}

.slider-container {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.slider-container label {
  color: #ccc;
  width: 150px;
}
.slider-container input[type="range"] {
  flex: 1;
  margin: 0 10px;
}
.slider-icon {
  width: 32px;
  text-align: center;
  font-size: 20px;
  color: #ccc;
}

/* Mute Checkbox */
#mute-container {
  margin-bottom: 15px;
  color: #ccc;
  display: flex;
  align-items: center;
}
#mute-container label {
  cursor: pointer;
}
#mute-container input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  cursor: pointer;
}


/* Link tooltip for showing command on hover */
#link-tooltip {
  display: none;
  position: fixed;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'JetBrains Mono NL', monospace;
  z-index: 10000;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#link-tooltip::before {
  content: 'Command: ';
  color: #888;
}

/* General UI tooltip for help text on various elements */
#ui-tooltip {
  display: none;
  position: fixed;
  background: #1a1815;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 10000;
  pointer-events: none;
  max-width: 280px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid #333;
}
#ui-tooltip .tooltip-header {
  color: #c4a35a;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 2px;
}
#ui-tooltip .tooltip-text {
  color: #888;
  font-style: italic;
}
#ui-tooltip .tooltip-detail {
  color: #aaa;
  font-size: 11px;
}

/* Items panel styles (Equipment, Inventory, Keychain tabs) */
#items-panel {
  height: 100%;
  font-family: 'JetBrains Mono NL', 'JetBrains Mono', monospace;
  font-size: 12px;
}

.items-tab-content {
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3530 #1e1e1e;
}
/* Dark scrollbar for Items tabs (webkit) */
.items-tab-content::-webkit-scrollbar {
  width: 8px;
}
.items-tab-content::-webkit-scrollbar-track {
  background: #1e1e1e;
}
.items-tab-content::-webkit-scrollbar-thumb {
  background: #3a3530;
  border-radius: 4px;
}
.items-tab-content::-webkit-scrollbar-thumb:hover {
  background: #4a4540;
}

.eq-section {
  margin-bottom: 8px;
}

.eq-header {
  color: #e8dcc8;
  margin-bottom: 2px;
}

.eq-slot {
  display: flex;
  padding-left: 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
}

.eq-slot:hover {
  background: rgba(92, 179, 165, 0.1);
}

.eq-label {
  color: #c4a35a;
  min-width: 70px;
  text-align: right;
  margin-right: 6px;
}

.eq-value {
  color: #5cb3a5;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eq-value.eq-empty {
  color: #666;
}

/* Equipment item flags */
.eq-flag {
  font-size: 0.85em;
  font-weight: bold;
  margin-right: 2px;
  color: #808080;
}
.eq-flag-cursed { color: #af0000; }
.eq-flag-enchanted { color: #8888ff; }
.eq-flag-quest { color: #e6a800; }

/* Inventory list styles */
.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.inv-empty, .key-empty {
  color: #666;
  font-style: italic;
}

.inv-row {
  display: flex;
  align-items: center;
  padding: 1px 4px;
  line-height: 1.4;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
}

.inv-row:hover {
  background: rgba(92, 179, 165, 0.1);
}

.inv-num {
  color: #c4a35a;
  min-width: 32px;
  text-align: right;
  margin-right: 4px;
  font-family: monospace;
}

.inv-name {
  color: #5cb3a5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-qty {
  color: #e8dcc8;
  margin-left: 6px;
}

.inv-footer {
  color: #888;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #3a3530;
  font-size: 11px;
}

/* Item context menu */
.item-context-menu {
  display: none;
  position: fixed;
  background: #2a2520;
  border: 1px solid #c4a35a;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 100000;
  min-width: 100px;
  overflow: hidden;
}

.item-context-menu.visible {
  display: block;
}

.item-context-header {
  padding: 6px 10px;
  background: #1a1815;
  color: #5cb3a5;
  font-size: 11px;
  border-bottom: 1px solid #3a3530;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.item-context-option {
  padding: 6px 10px;
  color: #e8dcc8;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 11px;
}

.item-context-option:hover {
  background: #3a3530;
  color: #c4a35a;
}

.item-context-separator {
  height: 1px;
  margin: 3px 8px;
  background: #3a3530;
}

/* Keychain list styles */
.keychain-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Keyring header row */
.key-header-row {
  display: flex;
  padding: 2px 6px;
  font-size: 10px;
  color: #888;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2px;
}

/* Keyring data row */
.key-row {
  display: flex;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(40, 40, 40, 0.5);
  line-height: 1.3;
  font-size: 11px;
}

/* Column widths */
.key-col-type {
  flex: 0 0 55px;
  min-width: 55px;
}

.key-col-location {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 6px;
}

.key-col-where {
  flex: 0 0 50px;
  min-width: 50px;
  text-align: right;
}

/* Column styling */
.key-type {
  color: #c4a35a;
  font-weight: bold;
}

.key-location {
  color: #e8dcc8;
}

.key-where {
  color: #888;
}

/* Sequence row for lockpicks */
.key-sequence-row {
  padding: 2px 6px 4px 61px;
  font-size: 10px;
  margin-bottom: 2px;
}

.key-sequence-label {
  color: #666;
  margin-right: 4px;
}

.key-sequence {
  color: #5cb3a5;
  font-family: monospace;
  word-break: break-all;
}

/* Affects panel styles */
#affects-panel {
  height: 100%;
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3530 #1e1e1e;
}
/* Dark scrollbar for Affects panel (webkit) */
#affects-panel::-webkit-scrollbar {
  width: 8px;
}
#affects-panel::-webkit-scrollbar-track {
  background: #1e1e1e;
}
#affects-panel::-webkit-scrollbar-thumb {
  background: #3a3530;
  border-radius: 4px;
}
#affects-panel::-webkit-scrollbar-thumb:hover {
  background: #4a4540;
}

.aff-header {
  display: flex;
  justify-content: space-between;
  color: #e8dcc8;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #3a3530;
}

.aff-header-name {
  flex: 1;
}

.aff-header-duration {
  text-align: right;
}

#affects-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aff-row {
  display: flex;
  justify-content: space-between;
  line-height: 1.4;
}

.aff-name {
  color: #5cb3a5;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aff-name.aff-buff {
  color: #5cb3a5;
}

.aff-name.aff-debuff {
  color: #e05555;
}

.aff-duration {
  color: #e8dcc8;
  text-align: right;
  min-width: 70px;
}

.aff-duration.aff-permanent {
  color: #666;
  font-style: italic;
}

.aff-time-unit {
  color: #c4a35a;
}

.aff-empty {
  color: #666;
  font-style: italic;
}

/* Combat panel styles */
#combat-panel {
  height: 100%;
  padding: 6px;
}

/* Combat section headers */
.combat-section-header {
  color: #888;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  margin-bottom: 2px;
}
.combat-section-header:first-child {
  margin-top: 0;
}

/* Combat enemies name list */
#combat-enemies-names {
  margin-bottom: 4px;
}
.combat-enemy-name-row {
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1.4;
}
.combat-enemy-name-row .enemy-target-marker {
  color: #c4a35a;
  font-size: 10px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.combat-enemy-name-row .enemy-name-link {
  color: #e8dcc8;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combat-enemy-name-row .enemy-name-link:hover {
  color: #c4a35a;
  text-decoration: underline;
}
.combat-enemy-name-row .enemy-name-link.enemy-engaged {
  font-weight: bold;
}
.combat-enemy-name-row .enemy-status {
  color: #888;
  font-size: 11px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Dynamic per-enemy gauge bars in combat widget */
#combat-enemy-gauges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Combat widget settings menu */
.combat-settings-menu {
  position: fixed;
  background: #2a2520;
  border: 1px solid #3a3530;
  border-radius: 6px;
  padding: 6px 10px;
  z-index: 99999;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: none;
}

.combat-settings-menu.show {
  display: block;
}

.combat-settings-menu label {
  display: block;
  color: #c0c0c0;
  font-size: 12px;
  padding: 3px 0;
  cursor: pointer;
  user-select: none;
}

.combat-settings-menu label:hover {
  color: #c4a35a;
}

.combat-settings-menu input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #333;
  position: relative;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.combat-settings-menu input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  top: -1px;
  left: 1px;
  font-size: 12px;
  color: #c4a35a;
  font-weight: bold;
}

/* Combat settings button in widget header */
.combat-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  margin-right: 2px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  line-height: 24px;
}

.combat-settings-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

#comm-output {
  background: #1e1e1e;
}

.tabs {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'JetBrains Mono NL', 'JetBrains Mono', monospace;
  background: #1e1e1e;
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid #3a3530;
}

.tab-button {
  flex: 1;
  padding: 0.5em;
  background: #2a2520;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  color: #999;
  transition: background 0.2s, color 0.2s;
}

.tab-button:not(.active):hover {
  background: #3a3530;
  color: #c4a35a;
}

.tab-button.active {
  background: #1e1e1e;
  color: #c4a35a;
  border-bottom: 2px solid #c4a35a;
}

.tab-contents {
  flex: 1;
  padding: 0.25em;
  background: #1e1e1e;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  height: 100%;
}

.text-channel {
  font-size: 11px;
}
/* Per-channel colors matching in-game ansi-aliases.yaml */
.channel-chat { color: #af5faf; }      /* chat-prefix: 135 Medium Purple */
.channel-broadcast { color: #008000; } /* broadcast-header: 2 Green */
.channel-tell { color: #5fd7ff; }      /* tell-prefix: 81 Sky Blue */
.channel-otell { color: #af8787; }     /* otell-prefix: 138 Dusty Rose */
.channel-party { color: #ff00ff; }     /* party-prefix: 13 Bright Magenta */
.channel-login { color: #00afaf; }     /* login-prefix: 37 Teal */
.channel-say { color: #ff00ff; }       /* saytext: 13 Bright Magenta */
.channel-sayto { color: #ff00ff; }     /* saytext: 13 Bright Magenta */
.channel-shout { color: #ffff00; }     /* shout-body: 11 Bright Yellow */
.channel-emote { color: #c0c0c0; }     /* emote-message: 7 Default gray */
.text-name.mob {
  color: #00ffff;
}
.text-name.player {
  color: #c4a35a;
}
.text-timestamp {
  color: #008000;
}
.chat-window {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background-color: #1e1e1e;
  color: #ddd;
  font-size: inherit;
}
/* Dark scrollbar for chat windows */
.chat-window::-webkit-scrollbar {
  width: 8px;
}
.chat-window::-webkit-scrollbar-track {
  background: #1e1e1e;
}
.chat-window::-webkit-scrollbar-thumb {
  background: #3a3530;
  border-radius: 4px;
}
.chat-window::-webkit-scrollbar-thumb:hover {
  background: #4a4540;
}
/* Firefox scrollbar */
.chat-window {
  scrollbar-width: thin;
  scrollbar-color: #3a3530 #1e1e1e;
}
.chat-window p {
  margin: 2px 0;
}
.chat-window.broadcast {
  color: #d700d7;
}