/* mvh chat: a 2000s instant-messenger window on the monitor. Classes prefixed cq-. */
.cq-win {
  position: absolute; z-index: 20;
  display: flex; flex-direction: column;
  background: #d4d0c8;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  font: 14px/1.4 Tahoma, Verdana, sans-serif; color: #111;
}
.cq-win[hidden] { display: none; }
.cq-win.cq-front { z-index: 36; }
.cq-win *, .cq-win *::before, .cq-win *::after { box-sizing: border-box; }

.cq-title {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 4px 0 7px;
  background: linear-gradient(90deg, #0a246a, #3a6ea5 60%, #a6caf0);
  color: #fff; font-size: 13.5px; cursor: default; user-select: none;
}
.cq-inactive .cq-title { background: linear-gradient(90deg, #808080, #b5b5b5); color: #d4d0c8; }
.cq-title b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-tb { display: flex; gap: 2px; }
.cq-tb button {
  width: 21px; height: 19px; display: grid; place-items: center; padding: 0;
  background: #d4d0c8; color: #000; font: bold 12px/1 Tahoma, sans-serif;
  border: 1px solid; border-color: #fff #404040 #404040 #fff;
}
.cq-tb button:active { border-color: #404040 #fff #fff #404040; }

/* the app's own mark: a green speech bubble with an online dot, original to this site */
.cq-ico { position: relative; flex: none; width: 17px; height: 14px; border-radius: 8px 8px 8px 2px; background: linear-gradient(#7ee07e, #2f9a2f); box-shadow: inset 0 0 0 1px #1d6b1d; }
.cq-ico::after { content: ""; position: absolute; right: 3px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }

.cq-menu { display: flex; gap: 16px; padding: 3px 9px; font-size: 13px; border-bottom: 1px solid #a0a0a0; }

.cq-head {
  display: flex; gap: 10px; align-items: center;
  margin: 6px 6px 0; padding: 7px 9px;
  background: linear-gradient(#fdfcf6, #ecebe2);
  border: 1px solid; border-color: #808080 #fff #fff #808080;
}
.cq-avatar {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: linear-gradient(#3d78b5, #1B5790); color: #fff;
  font: bold 14px/1 Arial, sans-serif; border: 1px solid #0f3b66;
}
.cq-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cq-who b { font-size: 15px; }
.cq-status { margin-left: 6px; font-size: 12.5px; color: #1d7a1d; font-weight: bold; }
.cq-status i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b9f5a8, #2fae2f 70%); box-shadow: 0 0 0 1px #1d6b1d; vertical-align: -1px; }
.cq-meta { font-size: 12px; color: #666; }

.cq-log {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 6px 6px 0; padding: 8px 10px;
  background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080;
}
.cq-m { margin-bottom: 9px; }
.cq-m-head { font-size: 12.5px; }
.cq-m-head span { color: #888; }
.cq-them .cq-m-head b { color: #c1121f; }
.cq-me .cq-m-head b { color: #0b3fa8; }
.cq-m-body { padding-left: 2px; font-size: 14px; word-wrap: break-word; }
.cq-m-body a, .cq-sys a { color: #0b3fa8; }
.cq-sys { font-size: 12.5px; color: #555; background: #fffbe0; border: 1px dashed #d8c86a; padding: 5px 7px; }
.cq-typing { margin: 3px 8px 0; font-size: 12px; font-style: italic; color: #555; }
.cq-typing[hidden] { display: none; }

.cq-quick { display: flex; gap: 6px; padding: 7px 6px 0; }
.cq-qb {
  flex: 1; display: grid; place-items: center; padding: 5px 4px;
  background: #d4d0c8; color: #111; font: 12.5px/1.2 Tahoma, sans-serif; text-decoration: none; cursor: pointer;
  border: 1px solid; border-color: #fff #404040 #404040 #fff; white-space: nowrap;
}
.cq-qb:hover { background: #e2dfd8; }
.cq-qb:active { border-color: #404040 #fff #fff #404040; }
.cq-qb-in b { display: inline-block; padding: 0 3px; margin-right: 3px; border-radius: 2px; background: #0a66c2; color: #fff; font: bold 11px/14px Arial, sans-serif; }

.cq-compose { padding: 7px 6px 7px; }
.cq-input {
  display: block; width: 100%; resize: none; padding: 5px 7px;
  font: 14px/1.4 Tahoma, Verdana, sans-serif; color: #111;
  background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; outline: none;
}
.cq-send-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cq-hint { font-size: 11.5px; color: #666; }
.cq-send {
  min-width: 84px; padding: 4px 14px; font: bold 13px/1.3 Tahoma, sans-serif;
  background: #d4d0c8; color: #111; border: 2px solid; border-color: #fff #404040 #404040 #fff;
}
.cq-send:active { border-color: #404040 #fff #fff #404040; }
.cq-win button:focus-visible, .cq-win a:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }