/*
 * roombar.css — feature "spells-roombar" (spec 03 §5–§6): the record bar above the
 * history grid (.history-toolbar), host avatar + nickname, the column button + menu,
 * the room search input/button and its match dropdown.
 * Values and source order verbatim from the original: `.history-toolbar button`
 * (0,1,1) deliberately beats `.column-toggle`, `.room-option` and `.room-search-button`
 * (quirk 1) – do not "fix" it.
 */

/* Shared with the host dropdown in the original (`.host-option-* , .room-option-*`). */
.room-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.room-option-title {
  display: block;
  min-width: 0;
}

.room-option-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-toolbar {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(92px, 148px) 64px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(180deg, #192c44f5, #0c1828fa), radial-gradient(circle at 18px 0, rgba(245, 216, 142, .16), transparent 42px);
  box-shadow: inset 0 1px #f5d88e57, inset 0 -1px #4689be52;
}

/* Identical template on purpose: hidden profile → the bar shifts left (quirk 2). */
.history-toolbar:has(.room-profile[hidden]) {
  grid-template-columns: minmax(92px, 148px) 64px minmax(0, 1fr);
}

.history-toolbar input,
.history-toolbar button {
  min-height: 30px;
  border-radius: 0;
  border: 0;
}

.history-toolbar button {
  padding-inline: 8px;
  background: transparent;
  color: #fff3d8;
  font-weight: 800;
}

.history-toolbar input {
  border-left: 1px solid rgba(245, 216, 142, .18);
  background: #050d196b;
  color: #fff7df;
  text-align: center;
  font-weight: 650;
}

.history-toolbar input::placeholder {
  color: #ffffffad;
}

/*
 * In the original `input.is-error` comes AFTER `.history-toolbar input`, so the red
 * colour wins on the 1px left border. base.css loads before this file, so restore that
 * outcome here (scoped to the record bar; same visual result).
 */
.history-toolbar input.is-error {
  border-color: #ff6262;
  box-shadow: 0 0 0 2px #ff62623d;
}

.history-columns {
  position: relative;
  min-width: 0;
}

.column-toggle {
  position: relative;
  width: 64px;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 19px 0 9px;
  background: linear-gradient(180deg, #f6d879, #cf9c34);
  color: #5c3300;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px #ffffff73, 0 2px 8px #0000002e;
}

.column-toggle:after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #5c3300;
  border-bottom: 2px solid #5c3300;
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.column-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: 64px;
  overflow: hidden;
  border: 1px solid rgba(245, 216, 142, .62);
  border-radius: 8px;
  background: #17181ef0;
  box-shadow: 0 10px 22px #00000059;
}

.column-menu button {
  width: 100%;
  min-height: 28px;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #fff7df;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.column-menu button:hover,
.column-menu button.is-active {
  background: #f5d88e38;
  color: #fff;
}

.room-picker {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: stretch;
}

.room-picker input {
  width: 100%;
  font-size: 13px;
  font-weight: 760;
}

.room-search-button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 46px;
  border-left: 1px solid rgba(245, 216, 142, .18) !important;
  color: #fff4ce !important;
  font-size: 12px;
}

.room-search-button.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.room-search-button.is-loading:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 244, 206, .32);
  border-top-color: #fff4ce;
  border-radius: 50%;
  animation: searchSpin .72s linear infinite;
}

.room-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 232px;
  overflow-y: auto;
  border: 1px solid rgba(245, 216, 142, .58);
  background: #0b1626fa;
  box-shadow: 0 12px 30px #0000005c;
}

.room-option {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 0;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  background: transparent;
  color: #fff7df;
  text-align: left;
}

.room-option:hover {
  background: #f5d88e1a;
}

.room-option img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff1a;
}

.room-option-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff1f;
}

.room-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.room-option strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff7df;
  opacity: 1;
}

.room-option strong {
  font-size: 13px;
  line-height: 1.2;
}

@keyframes searchSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ */
/* Host avatar + nickname (click copies the room address)             */
/* ------------------------------------------------------------------ */
.room-profile {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
  min-height: 30px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}

.room-profile[hidden] {
  display: none;
}

.room-profile img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(245, 216, 142, .42);
  object-fit: cover;
  background: #ffffff14;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.room-profile:hover img {
  border-color: #ffe89fd9;
  box-shadow: 0 0 14px #7ee8ff38, 0 0 18px #f5d88e29;
  transform: translateY(-1px);
}

.room-profile span {
  min-width: 0;
  display: block;
  max-width: 112px;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(100deg, #fff7df, #ffe690 22%, #7de8ff 42%, #fff 52%, #f7cd68 68%, #fff7df);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 13px;
  font-weight: 850;
  text-shadow: 0 0 10px rgba(255, 232, 159, .12);
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: nicknameShine 2.8s linear infinite;
}

@keyframes nicknameShine {
  0% {
    background-position: 220% 50%;
  }
  to {
    background-position: -20% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-profile span {
    animation: none;
    background-position: 0 50%;
  }
}