/* Chat page: fit viewport; bottom padding matches vertical gap (0.75rem) */
.site-main > .chat-container {
  padding: 0.75rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.chat-room-wrapper {
  flex: 1;
  min-height: 0;
  padding: 0;
  font-family: inherit;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-room {
  --chat-input-block-height: 170px; /* fixed height for message entry and emoji picker panels (30px taller than base) */
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr) 1fr;
  grid-template-rows: 1fr;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  align-content: stretch;
}

/* Match theme breakpoint (767px): on mobile show only center column, like other pages */
@media (max-width: 767px) {
  .chat-room {
    grid-template-columns: 1fr;
  }

  .chat-room > .chat-left,
  .chat-room > .chat-right {
    display: none !important;
  }
}

.chat-middle {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chat-left {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chat-right {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Match site content boxes: same look as .article-body / .site-sidebar; same horizontal padding as grid columns (10px) so column widths align with other pages */
.chat-member-list,
.chat-buffer-container,
.chat-message-entry,
.chat-emoji-picker,
.chat-right-placeholder,
.chat-credits-box {
  display: block;
  background: #cdbe91;
  border: 5px solid #cfa522;
  border-radius: 12px;
  padding: 0.5rem 10px 1rem;
  color: #222;
  box-shadow: inset 3px 3px 4px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.chat-right-placeholder {
  min-height: 4rem;
  min-width: 0;
  overflow: auto;
  color: #222;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
}

.chat-right-placeholder h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: #624d0b;
}

.chat-right-placeholder h3::before,
.chat-right-placeholder h3::after {
  content: none;
  display: none;
}

.chat-right-placeholder p {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chat-right-placeholder a,
.chat-right-placeholder a:visited,
.chat-right-placeholder a:hover,
.chat-right-placeholder a:focus {
  color: #222;
  font-weight: bold;
  text-decoration: underline;
}

.chat-credits-box {
  flex: 0 0 auto;
  font-size: 0.85rem;
  line-height: 1.4;
}

.chat-credits-box p {
  margin: 0;
}

.chat-credits-box a,
.chat-credits-box a:visited,
.chat-credits-box a:hover,
.chat-credits-box a:focus {
  color: #222;
  font-weight: bold;
  text-decoration: underline;
}

.chat-member-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.chat-member-list h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: #624d0b;
}

.chat-members-list {
  margin-top: 0.5rem;
}

.chat-member-item {
  padding: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.9rem;
}

.chat-member-item .chat-username {
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.chat-member-inactive {
  opacity: 0.6;
}

.chat-action-icon {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  opacity: 0.85;
}

.chat-action-icon:hover {
  opacity: 1;
}


/* Unified button style for all chat action buttons (same height as inputs) */
.chat-connect-btn,
.chat-auth-btn,
.chat-auth-cancel-btn,
.chat-send,
.chat-scroll-to-bottom {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #624d0b;
  color: #fff;
  border: 2px solid #8b6914;
  border-radius: 4px;
  line-height: 1.2;
  box-sizing: border-box;
}

.chat-connect-btn:hover,
.chat-auth-btn:hover,
.chat-auth-cancel-btn:hover,
.chat-send:hover,
.chat-scroll-to-bottom:hover {
  background: #8b6914;
}

.chat-buffer-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  min-width: 0;
}

.chat-buffer-topic {
  min-width: 0;
}

.chat-buffer-topic h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: #624d0b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-buffer-topic h3::before,
.chat-buffer-topic h3::after {
  content: none;
  display: none;
}

.chat-buffer-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
  min-width: 0;
}

.chat-message {
  margin-bottom: 0.2rem;
  padding: 0.1rem 0;
  border: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.chat-message-author {
  font-weight: bold;
  color: #624d0b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.chat-message-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.chat-message-body a {
  color: #624d0b;
}

.chat-message-system {
  font-style: italic;
  color: #555;
}

.chat-message-system .chat-message-body {
  color: inherit;
}

.chat-message-me .chat-message-me-action {
  font-style: italic;
}

.chat-scroll-to-bottom {
  margin-top: 0.5rem;
}

.chat-buffer-empty {
  color: #555;
  padding: 1rem;
  font-style: italic;
}

.chat-message-entry {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  min-width: 0;
  padding-bottom: 0;
  height: var(--chat-input-block-height);
  max-height: var(--chat-input-block-height);
  overflow: hidden;
}

.chat-toolbar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  margin-bottom: 0.75rem;
}

.chat-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.chat-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.chat-toolbar-icon {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  opacity: 0.85;
}

.chat-toolbar-icon:hover {
  opacity: 1;
}

.chat-username-row-below {
  margin-top: 0.35rem;
}

.chat-color-popover {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.chat-color-popover .chat-color-input {
  width: 3.2rem;
  padding: 0.1rem 0.2rem;
  border: 1px solid #8b6914;
  border-radius: 2px;
  background: #fff;
  color: #222;
  font-family: inherit;
  font-size: 0.65rem;
  line-height: 1.2;
}

.chat-color-change-btn {
  padding: 0.1rem 0.25rem;
  font-size: 0.6rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #624d0b;
  color: #fff;
  border: 1px solid #8b6914;
  border-radius: 2px;
  line-height: 1.2;
}

.chat-color-change-btn:hover {
  background: #8b6914;
}

.chat-username-display {
  font-weight: bold;
  font-size: 0.9rem;
  color: #624d0b;
}

.chat-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.35rem;
  background: #fff;
  border: 2px solid #8b6914;
  border-radius: 4px;
  position: absolute;
  z-index: 10;
  box-shadow: none;
}

.chat-color-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

.chat-color-swatch:hover {
  transform: scale(1.1);
}

.chat-message-input-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

.chat-message-input-row .chat-message-input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.chat-message-input-row .chat-send {
  flex: none;
  align-self: stretch;
  box-sizing: border-box;
}

.chat-nick-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-nick-prompt {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
}

.chat-username-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Username input in the form only (member list usernames are plain text) */
.chat-message-entry .chat-username,
.chat-message-input {
  padding: 0.5rem;
  border: 2px solid #8b6914;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-family: inherit;
}

.chat-message-input {
  min-height: 2.5rem;
  resize: none;
  max-height: 150px;
}

.chat-send:disabled {
  background: #ccc;
  color: #666;
  border-color: #999;
  cursor: not-allowed;
}

.chat-send:disabled:hover {
  background: #ccc;
}

.chat-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-auth-prompt {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
}

.chat-auth-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.chat-password-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.chat-password {
  padding: 0.5rem;
  border: 2px solid #8b6914;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-family: inherit;
}

.chat-error-message {
  color: #a55;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.chat-emoji-picker {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  flex: 0 0 auto;
  height: var(--chat-input-block-height);
  max-height: var(--chat-input-block-height);
  box-sizing: border-box;
}

.chat-emoji-picker h3 {
  margin: 0 0 0.5rem 0;
  color: #624d0b;
  font-size: 0.95rem;
}

.chat-emoji-picker h3::before,
.chat-emoji-picker h3::after {
  content: none;
  display: none;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.5rem, 1.5rem));
  gap: 0.25rem;
  font-size: 1.2rem;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.chat-emoji-grid button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
}

.chat-emoji-grid button:hover {
  background: rgba(0, 0, 0, 0.08);
}

.chat-status {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 0.5rem;
}

.chat-status.connected { color: #3a7; }
.chat-status.reconnecting { color: #a70; }
.chat-status.disconnected { color: #a55; }