/*
 * YTHT Reborn — Webclient custom styles
 * Dark xiuxian-themed MUD client interface
 */

/* Main text output area */
#messagewindow, .main-output, .content-area {
  background-color: #0d0d1a !important;
  color: #c8c8d0 !important;
  font-family: "Courier New", "Noto Sans Mono CJK SC", "Source Han Mono SC", monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Input area */
#inputfield, .input-area input, .input-area textarea {
  background-color: #12122a !important;
  color: #e0e0e8 !important;
  border: 1px solid #333366 !important;
  font-family: "Courier New", "Noto Sans Mono CJK SC", monospace !important;
  font-size: 14px !important;
  caret-color: #e0c080 !important;
}

#inputfield:focus, .input-area input:focus, .input-area textarea:focus {
  border-color: #6666aa !important;
  outline: none !important;
  box-shadow: 0 0 4px rgba(100, 100, 180, 0.3) !important;
}

/* Golden Layout panes */
.lm_content {
  background-color: #0d0d1a !important;
}

.lm_header {
  background-color: #1a1a2e !important;
}

.lm_tab {
  background-color: #1a1a2e !important;
  color: #b0b0c0 !important;
}

.lm_tab.lm_active {
  background-color: #252545 !important;
  color: #e0c080 !important;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0d0d1a;
}

::-webkit-scrollbar-thumb {
  background: #333366;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4444aa;
}

/* Link colors */
a {
  color: #8899cc;
}
a:hover {
  color: #aabbee;
}

/* Error / system messages */
.err {
  color: #cc6666 !important;
}

/* Inline ANSI color overrides for better contrast on dark bg */
.ansi-bright-white { color: #ffffff !important; }
.ansi-white { color: #c8c8d0 !important; }
.ansi-bright-yellow, .ansi-yellow { color: #e0c080 !important; }
.ansi-bright-green, .ansi-green { color: #66cc88 !important; }
.ansi-bright-cyan, .ansi-cyan { color: #66cccc !important; }
.ansi-bright-blue, .ansi-blue { color: #6688cc !important; }
.ansi-bright-magenta, .ansi-magenta { color: #cc66cc !important; }
.ansi-bright-red, .ansi-red { color: #cc6666 !important; }

/* Text selection */
::selection {
  background: #333366;
  color: #e0e0e8;
}

/* Overall body */
body {
  background-color: #0a0a15 !important;
}

/* ── Mobile responsive — tablet ── */
@media (max-width: 768px) {
  #messagewindow, .main-output, .content-area {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #inputfield, .input-area input, .input-area textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
  #ytht-header {
    flex-wrap: wrap;
    padding: 4px 8px !important;
  }
  #ytht-header .ytht-title {
    font-size: 14px !important;
  }
}

/* ── Mobile responsive — phone portrait ── */
@media (max-width: 480px) {
  #messagewindow, .main-output, .content-area {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 4px !important;
  }
  #inputfield, .input-area input, .input-area textarea {
    font-size: 16px !important;
    padding: 8px !important;
    min-height: 44px;
  }
  /* Hide GoldenLayout tabs on small screens for more space */
  .lm_header {
    height: 24px !important;
    font-size: 11px !important;
  }
  .lm_tab {
    padding: 2px 6px !important;
    font-size: 11px !important;
  }
  #ytht-header .ytht-links {
    font-size: 11px !important;
  }
}

/* ── Touch-friendly inputs ── */
@media (hover: none) and (pointer: coarse) {
  #inputfield, .input-area textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
  .lm_tab {
    min-height: 32px;
    padding: 4px 8px !important;
  }
}