.fcs-chat {
  align-items: flex-end;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: fixed;
  z-index: 1200;
  /* The container is as wide as the open panel (340px) but its bottom row holds only the 36px
     launcher, aligned right — leaving ~300px of invisible container sitting over whatever the page
     has in its bottom-right corner, swallowing clicks on it. That made the IRC composer's Send
     button unclickable while chat was open, with nothing visibly covering it. Only the parts that
     can be seen should be able to be clicked. */
  pointer-events: none;
}

.fcs-chat-panel,
.fcs-chat-launch.rz-button { pointer-events: auto; }

.fcs-chat-right { right: 1.25rem; }
.fcs-chat-left { align-items: flex-start; left: 1.25rem; }

.fcs-chat-launch.rz-button {
  border-radius: 999px;
  box-shadow: var(--rz-shadow-4);
  font-weight: 600;
  padding: 0.7rem 1.1rem;
}

.fcs-chat-panel {
  background: var(--rz-panel-background-color);
  border: var(--rz-border-normal);
  border-radius: var(--rz-border-radius);
  box-shadow: var(--rz-shadow-8);
  color: var(--rz-text-color);
  display: flex;
  flex-direction: column;
  height: 460px;
  max-height: 70vh;
  max-width: 90vw;
  overflow: hidden;
  width: 340px;
}

.fcs-chat-header {
  align-items: center;
  background: var(--rz-primary);
  color: var(--rz-on-primary);
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
}

.fcs-chat-title { font-weight: 700; }
.fcs-chat-sub { font-size: 0.75rem; opacity: 0.85; }
.fcs-chat-header-actions { display: flex; gap: 0.15rem; }

.fcs-chat-x.rz-button {
  color: var(--rz-on-primary);
  min-width: 2rem;
  padding-inline: 0.4rem;
}

.fcs-chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.fcs-chat-row { display: flex; }
.fcs-chat-out { justify-content: flex-end; }
.fcs-chat-in { justify-content: flex-start; }
.fcs-chat-system { justify-content: center; }

.fcs-chat-system span {
  color: var(--rz-text-secondary-color);
  font-size: 0.75rem;
  text-align: center;
}

.fcs-chat-bubble {
  border-radius: var(--rz-border-radius);
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 78%;
  padding: 0.45rem 0.65rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.fcs-chat-out .fcs-chat-bubble {
  background: var(--rz-primary);
  border-end-end-radius: 0;
  color: var(--rz-on-primary);
}

.fcs-chat-in .fcs-chat-bubble {
  background: color-mix(in srgb, var(--rz-base-background-color) 90%, var(--rz-text-color));
  border-end-start-radius: 0;
  color: var(--rz-text-color);
}

.fcs-chat-who {
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
  opacity: 0.7;
}

.fcs-chat-typing { letter-spacing: 2px; }

.fcs-chat-input {
  border-top: var(--rz-border-normal);
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
}

.fcs-chat-input .rz-textbox { flex: 1 1 auto; min-width: 0; }
.fcs-chat-send.rz-button { flex: 0 0 auto; }

.fcs-chat-unavailable {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.fcs-chat-end {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.fcs-chat-end > .rzi { color: var(--rz-primary); font-size: 2rem; }
.fcs-chat-end > .rz-textbox { width: 100%; }
.fcs-chat-end-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

@media (max-width: 575px) {
  .fcs-chat { bottom: 0.75rem; }
  .fcs-chat-right { right: 0.75rem; }
  .fcs-chat-left { left: 0.75rem; }
  .fcs-chat-panel { max-height: calc(100vh - 6rem); }
}