/*
 * 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, textarea.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;
  min-height: 4.2rem !important;
  height: 4.2rem !important;
  max-height: 6.4rem !important;
  resize: vertical !important;
  line-height: 1.45 !important;
}

#inputfield:focus, textarea.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;
}

#clientwrapper {
  min-height: 0;
}

#inputform {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 8px;
  height: 100%;
  padding: 8px 10px 10px;
}

#prompt {
  flex: 0 0 auto;
}

#inputcontrol {
  flex: 0 0 auto;
}

#ytht-dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ytht-status-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ytht-status-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ytht-status-pill {
  background: rgba(26, 26, 46, 0.95);
  border: 1px solid #2f3a66;
  border-radius: 10px;
  color: #b8c0d8;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.25;
  padding: 6px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ytht-status-realm {
  color: #e0c080;
}

#ytht-status-xiuwei {
  color: #a6d6ff;
}

#ytht-status-htc {
  color: #ffcc66;
}

#ytht-status-conn {
  color: #66cc88;
}

.ytht-quickcmds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
  max-height: 148px;
  overflow-y: auto;
  padding: 2px 0 0;
  -webkit-overflow-scrolling: touch;
}

.ytht-cmd-btn {
  background: #252545;
  color: #b0b0c0;
  border: 1px solid #333366;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.ytht-cmd-btn:hover,
.ytht-cmd-btn.is-hover {
  border-color: #6666aa;
  color: #e0c080;
  background: #2c2c56;
}

/* ── Mobile responsive — tablet ── */
@media (max-width: 768px) {
  #messagewindow, .main-output, .content-area {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #inputfield, textarea.inputfield, .input-area input, .input-area textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
  .ytht-status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ytht-quickcmds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 156px;
  }
  #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, textarea.inputfield, .input-area input, .input-area textarea {
    font-size: 16px !important;
    padding: 8px !important;
    min-height: 4rem !important;
    height: 4rem !important;
  }
  /* 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;
  }
  .ytht-status-pill {
    font-size: 11px;
    padding: 5px 7px;
  }
  .ytht-quickcmds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 150px;
  }
}

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