/* Chat Options modal: same look as the travel modal (see modal.css and theme.css) */
#chat-modal {
  width: 300px;
  max-width: 90vw;
  user-select: none;
}

.chat-modal-section-title {
  margin-bottom: 4px;
  font-weight: bold;
  color: var(--color-accent-text);
}

/* Channel list: rows in a darker panel, the selected row has the accent border */
.chat-channel-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  margin-bottom: 10px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

.chat-channel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 5px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
  transition: border-color 0.1s, box-shadow 0.1s;
}

/* The display above would otherwise show the hidden Reports row */
.chat-channel-option[hidden] {
  display: none;
}

.chat-channel-option:not(.selected):hover {
  border-color: var(--color-accent-text);
  background-image: var(--gradient-surface-hover);
}

.chat-channel-option.selected {
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

.chat-channel-icon {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--color-accent);
}

.chat-channel-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-channel-name {
  font-weight: bold;
}

.chat-channel-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--color-text-soft);
}

/* Shown on the channels that are already open in the chat */
.chat-channel-badge {
  flex: 0 0 auto;
  display: none;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-success);
}

.chat-channel-option.opened .chat-channel-badge {
  display: block;
}

/* Private message field: shared text box with a person icon inside (text-field-icon-wrapper, see text-field.css) */
.chat-private-wrapper {
  margin-bottom: 8px;
}