/* plain Command Prompt look. floating, draggable, non-modal */
.con {
  position: fixed;
  z-index: 40;
  left: var(--cx, 8px);
  top: var(--cy, 56px);
  width: min(640px, calc(100vw - 16px));
  height: min(46dvh, 420px);
  display: flex;
  flex-direction: column;
  background: #0c0c0c;
  border: 1px solid #767676;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, .5);
  color: #cccccc;
  font-family: Consolas, 'Lucida Console', 'Courier New', monospace;
}
.con[hidden] { display: none; }

.con-bar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: #f0f0f0;
  color: #000;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  cursor: default;
  touch-action: none;
  user-select: none;
}
.con-title { padding: 7px 12px; }
.con-x {
  appearance: none;
  width: 46px;
  border: 0;
  background: none;
  color: #000;
  font-size: 13px;
  line-height: 1;
}
.con-x:hover, .con-x:active { background: #e81123; color: #fff; }
.con-bar:focus-visible { outline: 2px solid #000; outline-offset: -3px; }
.con-bar:focus-visible, .con-x:focus-visible { outline-color: #000; }

.con-log {
  flex: 1;
  min-height: 0;
  padding: 8px 10px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 15px;
  line-height: 1.25;
  scrollbar-width: thin;
  scrollbar-color: #777 #0c0c0c;
}
.ln { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.25em; }

.con-form { display: flex; align-items: center; gap: 0; padding: 0 10px 10px; }
.con-ps { flex: none; font-size: 15px; line-height: 1.25; }
.con-form input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  caret-color: #cccccc;
  color: #cccccc;
  font-family: inherit;
  font-size: 16px; /* >=16px stops iOS zooming on focus */
  line-height: 1.25;
}
.con ::selection { background: #cccccc; color: #0c0c0c; }
.con :focus-visible { outline: none; }
.con .con-bar:focus-visible { outline: 2px solid #000; outline-offset: -3px; }
.con-x:focus-visible { outline: 2px solid #000; outline-offset: -3px; }

@media (min-width: 860px) {
  .con { height: min(52dvh, 440px); }
}