/* messenger/conversation-settings.css — 6 of 9. Needs every file above it.
   Per-conversation settings (KAN-41): the info panel, its dialogs, and the chat
   list's ⋯ menu. Loaded late on purpose — several rules here override earlier files
   (e.g. .thread-info-btn beats ".thread-header span" from thread.css).
   Sections, in order:
     - .thread-info-btn in the thread header, .messenger--info-open (third grid column)
     - Info panel: .chat-info, top bar and close buttons, big avatar, name, subtitle,
       quick actions, collapsible sections, action rows and member rows
     - Muted bell beside a list row's name (.conversation-name-row, .conversation-muted)
     - System lines in the thread (.message-row.system, .system-line)
     - The shared settings dialog's contents: .settings-text, .settings-error,
       .modal-confirm.danger, theme grid and swatches, nickname rows
     - @media (max-width: 720px): the info panel on narrow screens
     - The list row's ⋯ button and menu (.conversation-menu-trigger, .conversation-menu)
     - @media (hover: none): keep the ⋯ button visible on touch screens
   Driven by conversation-settings.js. The panel's open/close animations are in
   motion.css; the .modal shell itself is in message-actions.css. */

/* Conversation settings (KAN-41) */

.thread-info-btn {
  margin-left: auto;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--bg); /* the same soft circle as the sidebar's buttons (KAN-62) */
  color: var(--accent-ink); /* but in the chat's theme colour, as in Messenger */
  font-size: 1.15rem;
  cursor: pointer;
}

.thread-info-btn:hover,
.thread-info-btn.active {
  background: var(--accent-soft);
}

/* Beats ".thread-header span", which would make the icon bold navy text. */
.thread-info-btn .icon {
  color: inherit;
  font-weight: normal;
}

.thread-info-btn.active .icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.messenger--info-open {
  grid-template-columns: minmax(240px, 320px) 1fr auto;
}

.chat-info {
  --chat-info-width: clamp(260px, 26vw, 320px);
  width: var(--chat-info-width);
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 0 0.75rem 1.5rem;
  min-width: 0;
}

.chat-info-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0.5rem 1rem;
  text-align: center;
}

.chat-info-close {
  position: absolute;
  top: 0.75rem;
  left: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.chat-info-close:hover {
  background: var(--bg);
  color: var(--text);
}

.chat-info-close-mobile {
  display: none;
}

/* The conversation's avatar (or a group's two-avatar stack) at twice the list size. */
.chat-info-avatar {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-info-avatar > .avatar,
.chat-info-avatar > .avatar-stack {
  transform: scale(2);
}

.chat-info-name {
  margin: 0.9rem 0 0;
  font-size: var(--text-lg);
  color: var(--text);
  word-break: break-word;
}

.chat-info-subtitle {
  margin: 0.2rem 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.chat-info-quick {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.chat-info-quick .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
}

.chat-info-quick:hover .icon {
  background: var(--border);
}

.chat-info-section {
  border-top: 1px solid var(--border);
  padding: 0.25rem 0;
}

.chat-info-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.chat-info-section summary::-webkit-details-marker {
  display: none;
}

.chat-info-section summary:hover {
  background: var(--bg);
}

.chat-info-section summary .icon {
  transition: transform 0.15s;
}

.chat-info-section:not([open]) summary .icon {
  transform: rotate(-90deg);
}

.chat-info-action,
.chat-info-member {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
}

.chat-info-action {
  cursor: pointer;
}

.chat-info-action:hover,
.chat-info-member:hover {
  background: var(--bg);
}

.chat-info-action-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
}

.chat-info-action.danger {
  color: var(--error);
}

.chat-info-action-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.chat-info-action-text small {
  font-size: var(--text-xs);
  color: var(--muted);
}

.chat-info-member .avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.75rem;
}

.chat-info-member-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.chat-info-member-remove:hover {
  background: var(--error-bg);
  color: var(--error);
}

/* The list row's name sits with a small muted bell beside it. */
.conversation-name-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.conversation-muted {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Grey centered "Alice named the group Trip" lines in the thread. */
.message-row.system {
  align-items: center;
}

.message-row.system > * {
  max-width: 85%;
}

.system-line {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
}

/* The shared settings dialog. */

.settings-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

.settings-error {
  margin: -0.5rem 1.25rem 1rem;
  font-size: var(--text-sm);
  color: var(--error);
}

.modal-confirm.danger {
  background: var(--error);
  color: #fff;
}

.modal-confirm.danger:hover {
  background: #a82828;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.75rem;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 0 2px var(--surface-pop), 0 0 0 3px transparent;
}

.theme-swatch .icon {
  visibility: hidden;
}

.theme-option input:checked + .theme-swatch {
  box-shadow: 0 0 0 2px var(--surface-pop), 0 0 0 4px var(--text);
}

.theme-option input:checked + .theme-swatch .icon {
  visibility: visible;
}

.theme-option input:focus-visible + .theme-swatch {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.nickname-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nickname-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  /* The panel takes the whole screen, with a back arrow to the chat. */
  .messenger--info-open {
    grid-template-columns: 1fr;
  }

  .messenger--info-open .thread,
  .messenger--info-open .sidebar {
    display: none;
  }

  .chat-info {
    width: auto;
    border-left: none;
  }

  .chat-info-close-desktop {
    display: none;
  }

  .chat-info-close-mobile {
    display: inline-block;
  }
}

/* The list's ⋯ button (KAN-41): floats over the right end of a conversation while it's
   hovered, focused from the keyboard, or its menu is open, taking the unread badge's
   place. Hidden with opacity rather than display, so Tab can still reach it (KAN-62). */
.conversation-list li {
  position: relative;
}

.conversation-menu-trigger {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.conversation-menu-trigger:hover {
  background: var(--bg);
}

.conversation-list li:hover .conversation-menu-trigger,
.conversation-list li:focus-within .conversation-menu-trigger,
.conversation-list li.menu-open .conversation-menu-trigger {
  opacity: 1;
  pointer-events: auto;
}

.conversation-list li:hover .unread-badge,
.conversation-list li:focus-within .unread-badge,
.conversation-list li.menu-open .unread-badge {
  visibility: hidden;
}

/* Room for the button so the preview text doesn't run under it. */
.conversation-list li:hover .conversation-text,
.conversation-list li:focus-within .conversation-text,
.conversation-list li.menu-open .conversation-text {
  padding-right: 2.25rem;
}

.conversation-menu {
  z-index: 200;
  min-width: 190px;
}

/* Touch screens have no hover: keep the button showing. */
@media (hover: none) {
  .conversation-menu-trigger {
    opacity: 1;
    pointer-events: auto;
  }

  .conversation-list li .conversation-text {
    padding-right: 2.25rem;
  }

  .conversation-list li .unread-badge {
    margin-right: 2.5rem;
  }
}