/* The main client window in the WorldsPlayer layout (ARCHITECTURE.md §3.2),
   reskinned in the Nanophage teal. Pixel sizes are fixed except the console,
   which takes whatever the window gives it. */

.cw .win-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  grid-template-rows: minmax(0, 1fr) 24px 155px;
  background: #000;
}

/* ---- the console ----------------------------------------------------------- */
.cw-console {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  overflow: clip;
  background: #000;
  outline: none;
}
.cw-console > canvas { display: block; image-rendering: pixelated; }
.console-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The console while the world loads (integrator): black, one grey line. */
.console-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #000; color: #6FA6AA;
  font: 11px Tahoma, Verdana, sans-serif;
  cursor: wait;
}
.console-loading.failed { color: #C0C0C0; cursor: default; }

/* ---- the command column ------------------------------------------------------ */
.cw-column {
  grid-area: 1 / 2 / 2 / 3;
  display: flex;
  flex-direction: column;
  overflow: clip;
  min-height: 0;
  background: #006A6A url("../assets/ui/column.png");
  box-shadow: inset 1px 0 #001818, inset 2px 0 #1C8C8C, inset -1px 0 #003434;
}
.cmd-list { padding: 8px 0 2px; }
.cmd-btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-right: 10px;
  cursor: pointer;
}
.cmd-label {
  font: bold 10px Verdana, Tahoma, sans-serif;
  color: #DFFFFF;
  text-shadow: 1px 1px #002222;
  letter-spacing: 0.2px;
}
.cmd-btn:hover .cmd-label, .cmd-btn.open .cmd-label { color: #FFFFFF; }
.cmd-btn.open .cmd-label { position: relative; top: 1px; left: 1px; }
.cmd-bead { width: 14px; height: 14px; }
.cmd-vip { width: 16px; height: 12px; margin-right: -1px; }
.cmd-btn[data-cmd="vip"] { height: 28px; }
.cmd-btn[data-cmd="vip"] .cmd-label { font-size: 12px; letter-spacing: 1px; }

.friends-plate {
  margin: 6px 4px 3px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font: bold 10px Verdana, Tahoma, sans-serif;
  letter-spacing: 0.4px;
  color: #22103E;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, #F2EDFC 0%, #DCD0F4 40%, #C9B8E8 60%, #AE9AD6 100%);
  border: 1px solid;
  border-color: #FBF8FF #5A4686 #5A4686 #FBF8FF;
  box-shadow: 0 0 0 1px #0A2A2A;
}
.friend-rows {
  flex: 1 1 0;
  min-height: 0;
  margin: 1px 4px 4px;
  overflow-x: hidden;
  overflow-y: auto;   /* a skinned scroll bar appears once the list is longer than the column */
  background: repeating-linear-gradient(180deg, #0C8888 0 1px, #007070 1px 13px, #003A3A 13px 16px);
  background-attachment: local;   /* the empty stripes scroll with the names */
  box-shadow: 0 0 0 1px #002A2A;
}
/* The friends list's scroll bar is skinned to the column (period skinned
   clients did this rather than drop a 17 px XP bar into a 152 px column). */
.win .friend-rows::-webkit-scrollbar { width: 11px; }
.win .friend-rows::-webkit-scrollbar-track { background: #002E2E; box-shadow: inset 1px 0 #001C1C; }
.win .friend-rows::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: 1px solid;
  border-color: #46C4C4 #002A2A #002A2A #46C4C4;
  background: #0A8282 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cg fill='%2386E0E0'%3E%3Crect width='5' height='1'/%3E%3Crect y='2' width='5' height='1'/%3E%3Crect y='4' width='5' height='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
  min-height: 14px;
}
.win .friend-rows::-webkit-scrollbar-thumb:hover { background-color: #10929A; filter: none; }
.win .friend-rows::-webkit-scrollbar-button {
  width: 11px; height: 11px;
  border-radius: 0;
  border: 1px solid;
  border-color: #46C4C4 #002A2A #002A2A #46C4C4;
  background-color: #0A8282;
}
.win .friend-rows::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h1v1h1v1H0V2h1V1h1z' fill='%23E6FFFF'/%3E%3C/svg%3E");
}
.win .friend-rows::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h5v1H4v1H3v1H2V2H1V1H0z' fill='%23E6FFFF'/%3E%3C/svg%3E");
}
.win .friend-rows::-webkit-scrollbar-button:active { filter: none; border-color: #002A2A #46C4C4 #46C4C4 #002A2A; }
.friend-row {
  height: 13px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 3px;
  font: 10px Verdana, Tahoma, sans-serif;
  color: #F0FFFF;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.friend-row:hover { background: #0E8C8C; color: #fff; }
.friend-bead { width: 10px; height: 10px; flex: 0 0 10px; }
.friend-name { overflow: hidden; text-overflow: ellipsis; }
.friend-away { color: #A8DADA; font-size: 9px; }

/* ---- the status bar -------------------------------------------------------- */
.cw-status {
  grid-area: 2 / 1 / 3 / 3;
  position: relative;
  background: #008080 url("../assets/ui/statusbar.png");
  box-shadow: inset 0 1px #36B0B0, inset 0 -1px #004A4A;
  color: #fff;
  font: 12px Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px #004444;
  white-space: nowrap;
}
.sb-btn {
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font: bold 10px Verdana, Tahoma, sans-serif;
  color: #DFFFFF;
  text-shadow: 1px 1px #003030;
}
.sb-btn:hover { color: #fff; }
.sb-quit { left: 6px; }
.sb-map { right: 7px; }
.sb-bead { width: 14px; height: 14px; }
.sb-name { position: absolute; left: 92px; top: 5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.sb-drive {
  position: absolute;
  left: calc(50% - 39px);
  top: 1px;
  width: 78px;
  height: 22px;
  cursor: pointer;
}
.sb-drive img { display: block; width: 78px; height: 22px; }
.sb-info {
  position: absolute;
  left: calc(50% + 52px);
  right: 104px;
  top: 5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the bottom panel -------------------------------------------------------- */
.cw-bottom {
  grid-area: 3 / 1 / 4 / 3;
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr) 190px;
  background: #001C1C;
  min-width: 0;
  min-height: 0;
  overflow: clip;
}

.cw-adframe {
  width: 155px;
  height: 155px;
  box-sizing: border-box;
  border: 1px solid #772B14;
  padding: 1px;
  background: linear-gradient(135deg, #FF9160 0%, #EB5527 40%, #C23E14 100%);
}
.adcube { width: 149px; height: 149px; border: 1px solid #3A1206; box-sizing: content-box; margin: 0; background: #000; cursor: pointer; }
.cw-adframe .adcube { width: 149px; height: 149px; box-sizing: border-box; border: 0; outline: 1px solid #3A1206; outline-offset: -1px; }
.adcube-canvas { display: block; width: 149px; height: 149px; }

.cw-chat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 3px 3px 4px;
  min-width: 0;
  min-height: 0;
  overflow: clip;
  background: #002222;
  box-shadow: inset 0 1px #000;
}
.cw-log-frame, .cw-input-frame {
  box-sizing: border-box;
  border: 1px solid;
  border-color: #000 #5FA0A0 #5FA0A0 #000;
  box-shadow: inset 1px 1px #404040;
  background: #fff;
}
.cw-log-frame { flex: 1 1 0; min-height: 0; padding: 1px 0 0 1px; }
.cw-input-frame { flex: 0 0 21px; height: 21px; padding: 1px 0 0 1px; }
.cw-log {
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 1px 3px 2px;
  font: 12px Arial, Helvetica, sans-serif;
  line-height: 14px;
  color: #000;
  background: #fff;
  user-select: text;
  cursor: text;
}
.cw-chat.colored .cw-log { background: #FFFFCB; }
.cw-input {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 1px 4px 0;
  margin: 0;
  outline: none;
  font: 12px Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
  user-select: text;
}
.cw .cw-log::-webkit-scrollbar { width: 16px; }

.cl { white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-name { color: #000; }
.cl-name.admin { color: #0000FF; }
.cl-sys { color: #0000FF; }
.cl-me { color: #800080; }
.cl-pa, .cl-pa-name { color: #8B0000; }
.cl-error .cl-body { color: #FF0000; }
.cl-warn .cl-body { color: #A04800; }
.cl-admin .cl-body { font-weight: bold; }
/* The client's own lines are plain black Arial, as in WorldsPlayer
   ("To check for upgrades, use Options/Upgrade Now."); arrivals and
   departures are a quieter dark grey, never italic. */
.cl-local { color: #000; }
.cl-join { color: #505050; }
.cl-tip { color: #404040; }
.cl-tip-name { color: #006A6A; }
.cl-ts { color: #808080; }
/* What the room answers when you click a fitting or a patient (integrator). */
.cl-look { color: #5A2A5A; }

.cw-mapframe { width: 190px; height: 155px; background: #000; overflow: hidden; }
.facmap { display: block; width: 190px; height: 155px; }