/* ui/RoomChat — contract: ./RoomChat.spec.md. Tokens from ui/Theme. */

/* A glass card like the results' Quanta and Daily Ops panels. */
.qc-room-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--qc-line);
  background: var(--qc-glass);
  backdrop-filter: blur(6px);
  color: var(--qc-text);
}

.qc-room-chat__head { display: flex; align-items: center; gap: 8px; }

.qc-room-chat__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text);
}

.qc-room-chat__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px -6px 0;
  padding: 0;
  font: 500 15px/1 var(--qc-font-ui);
  color: var(--qc-text-dim);
  background: none;
  border: 0;
  border-radius: var(--qc-radius-sm);
  cursor: pointer;
}

.qc-room-chat__close:hover,
.qc-room-chat__close:focus-visible { color: var(--qc-text); background: color-mix(in oklab, var(--qc-text) 8%, transparent); }

/* The log: a column-reverse scroller starts at its end, so the newest line is
   what shows, and older ones are a scroll away. */
.qc-room-chat__scroll {
  display: flex;
  flex-direction: column-reverse;
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.qc-room-chat__body { display: flex; flex-direction: column; }

.qc-room-chat__empty {
  margin: 0;
  padding: 6px 0;
  font: 400 14px/1.4 var(--qc-font-ui);
  color: var(--qc-text-faint);
}

.qc-room-chat__log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qc-room-chat__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  font: 400 14px/1.4 var(--qc-font-ui);
}

/* The name is the standings' chip in a quiet button. */
.qc-room-chat__name {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  padding: 0 4px;
  margin-left: -4px;
  font: inherit;
  color: var(--qc-text);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--qc-radius-sm);
  align-self: flex-start;
}

button.qc-room-chat__name { cursor: pointer; }
button.qc-room-chat__name:hover,
button.qc-room-chat__name:focus-visible,
button.qc-room-chat__name[aria-expanded="true"] { border-color: var(--qc-line-strong); background: color-mix(in oklab, var(--qc-text) 6%, transparent); }

.qc-room-chat__name .qc-pilot-tag__name { font-weight: 600; }

.qc-room-chat__text {
  flex: 1 1 10em;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--qc-text);
}

/* A preset reads as one. */
.qc-room-chat__line[data-kind="quick"] .qc-room-chat__text { color: var(--qc-accent-2); font-weight: 500; }
.qc-room-chat__line[data-local="true"] .qc-room-chat__text { color: color-mix(in oklab, var(--qc-text) 88%, var(--qc-accent-2)); }

.qc-room-chat__reported {
  font: 600 12px/1 var(--qc-font-ui);
  letter-spacing: 0.04em;
  color: var(--qc-text-faint);
}

.qc-room-chat__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  padding: 2px 0 4px;
}

.qc-room-chat__menu button {
  min-height: 30px;
  padding: 0 12px;
  font: 600 12px/1 var(--qc-font-ui);
  letter-spacing: 0.02em;
  color: var(--qc-text);
  background: color-mix(in oklab, var(--qc-space-2) 85%, transparent);
  border: 1px solid var(--qc-line-strong);
  border-radius: 999px;
  cursor: pointer;
}

.qc-room-chat__menu button:hover,
.qc-room-chat__menu button:focus-visible { border-color: var(--qc-accent-2); }
.qc-room-chat__menu [data-part="room-chat-report"] { color: color-mix(in oklab, var(--qc-danger) 70%, var(--qc-text)); }

.qc-room-chat__form { display: flex; gap: 8px; min-width: 0; }

.qc-room-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  font: 400 15px/1 var(--qc-font-ui);
  color: var(--qc-text);
  background: color-mix(in oklab, var(--qc-space-0) 70%, transparent);
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
}

.qc-room-chat__input::placeholder { color: var(--qc-text-faint); }
.qc-room-chat__input:focus-visible { outline: 2px solid var(--qc-accent-2); outline-offset: 1px; border-color: transparent; }

.qc-room-chat__send {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text);
  background: color-mix(in oklab, var(--qc-accent-2) 18%, var(--qc-space-2));
  border: 1px solid color-mix(in oklab, var(--qc-accent-2) 55%, transparent);
  border-radius: var(--qc-radius-sm);
  cursor: pointer;
}

.qc-room-chat__send:disabled { cursor: default; opacity: 0.5; }

.qc-room-chat__notice {
  margin: 0;
  font: 500 13px/1.3 var(--qc-font-ui);
  color: var(--qc-rarity-legendary);
}

.qc-room-chat__muted {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 500 12px/1 var(--qc-font-ui);
  color: var(--qc-text-dim);
}

.qc-room-chat__unmute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  font: 600 12px/1 var(--qc-font-ui);
  color: var(--qc-text-dim);
  background: none;
  border: 1px solid var(--qc-line-strong);
  border-radius: 999px;
  cursor: pointer;
}

.qc-room-chat__unmute:hover,
.qc-room-chat__unmute:focus-visible { color: var(--qc-text); border-color: var(--qc-accent-2); }

.qc-room-chat__privacy {
  margin: 0;
  font: 400 12px/1.35 var(--qc-font-ui);
  color: var(--qc-text-faint);
}

.qc-room-chat__privacy-link { color: var(--qc-text-dim); text-decoration: underline; text-underline-offset: 2px; }
.qc-room-chat__privacy-link:hover,
.qc-room-chat__privacy-link:focus-visible { color: var(--qc-text); }

/* A thumb is not a cursor: every target is at least 44 px. */
@media (pointer: coarse) {
  .qc-room-chat__input { min-height: 44px; font-size: 16px; } /* 16 px: iOS does not zoom the page into the box */
  .qc-room-chat__send { min-height: 44px; }
  .qc-room-chat__line { align-items: center; row-gap: 0; }
  .qc-room-chat__log { gap: 0; }
  .qc-room-chat__name { min-height: 44px; }
  .qc-room-chat__menu button { min-height: 44px; }
  .qc-room-chat__unmute { min-height: 44px; }
  .qc-room-chat__close { min-height: 44px; min-width: 44px; }
}