/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

:root {
  /* Chat text size: a per-browser display preference, adjustable via the
     A-/A+ buttons in MessagePanel's header -- see lib/textSize.ts. This
     default (14px) matches what .chat-author/.chat-content-inline already
     used before the control existed, so nobody sees a size jump until they
     actually touch the buttons. */
  --chat-text-size: 14px;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #1e1f24;
  color: #e6e6ea;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

a {
  color: #d199c9;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input {
  font-family: inherit;
}

/* --- Auth page --- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: #26272e;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.auth-card h1 {
  margin: 0 0 4px;
  text-align: center;
}

.auth-subtitle {
  text-align: center;
  color: #9a9ba5;
  margin: 0 0 24px;
  font-size: 14px;
}

.auth-tabs {
  display: flex;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  background: #1e1f24;
}

.auth-tabs button {
  flex: 1 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: #9a9ba5;
  font-weight: 600;
}

.auth-tabs button.active {
  background: #b5519a;
  color: white;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #9a9ba5;
}

.auth-card input {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
  font-size: 14px;
}

.auth-submit {
  margin-top: 6px;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-error {
  background: rgba(255, 82, 82, 0.12);
  color: #ff8a8a;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin: 0;
}

.google-signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: white;
  color: #1f1f1f;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.google-signin-button:hover {
  background: #f5f5f5;
}

.auth-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: #6f7078;
  text-align: center;
}

.pending-page {
  max-width: 420px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}

.pending-page h1 {
  margin-bottom: 8px;
}

.pending-page p {
  color: #9a9ba5;
  font-size: 14px;
}

.admin-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
}

.admin-page h1 {
  margin: 8px 0 24px;
  font-size: 20px;
}

.admin-section {
  margin-bottom: 28px;
}

.admin-section h2 {
  font-size: 14px;
  color: #9a9ba5;
  margin: 0 0 10px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #26272e;
  border-radius: 8px;
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #303138;
  font-size: 13px;
}

.admin-table th {
  color: #6f7078;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

.admin-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #b5519a;
  color: white;
  margin-left: 6px;
}

.admin-actions {
  display: flex;
  gap: 6px;
}

.admin-actions button {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: #303138;
  color: #e6e6ea;
  font-size: 12px;
}

.admin-actions button:disabled {
  opacity: 0.4;
}

.admin-actions .admin-reject,
.admin-actions .admin-demote {
  background: rgba(255, 82, 82, 0.15);
  color: #ff8a8a;
}

.admin-empty {
  color: #6f7078;
  font-size: 13px;
}

/* --- Servers page --- */

.servers-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px;
}

.servers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.logout-button {
  background: transparent;
  border: 1px solid #3a3b44;
  color: #e6e6ea;
  padding: 8px 14px;
  border-radius: 6px;
}

.server-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.server-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #26272e;
  border-radius: 8px;
  margin-bottom: 8px;
}

.server-id {
  font-size: 12px;
  color: #6f7078;
  font-family: monospace;
}

.server-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-id-button {
  font-size: 11px;
  color: #6f7078;
  font-family: monospace;
  background: transparent;
  border: 1px solid #3a3b44;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.copy-id-button:hover {
  border-color: #b5519a;
  color: #d199c9;
}

.server-delete-button {
  background: rgba(255, 82, 82, 0.15);
  color: #ff8a8a;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
}

.server-delete-button:disabled {
  opacity: 0.5;
}

.servers-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.servers-actions form {
  background: #26272e;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.servers-actions h3 {
  margin: 0;
  font-size: 14px;
}

.servers-actions input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
}

.servers-actions button {
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
}

/* --- Server shell / sidebar --- */

.server-shell {
  display: flex;
  flex: 1 1;
  min-height: 0;
}

.channel-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #26272e;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.sidebar-header h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.server-id-label {
  font-size: 10px;
  color: #6f7078;
  font-family: monospace;
  word-break: break-all;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.server-id-label:hover {
  color: #d199c9;
}

.back-link {
  font-size: 13px;
  color: #9a9ba5;
}

.channel-group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7078;
  margin: 0 0 8px;
}

.channel-link {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  color: #b5b6c0;
  font-size: 14px;
  margin-bottom: 2px;
}

.channel-link:hover {
  background: #303138;
}

.channel-link.active {
  background: #953c80;
  color: white;
}

.channel-link-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d199c9;
  flex-shrink: 0;
}

.server-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.empty-state {
  padding: 40px;
  color: #9a9ba5;
}

/* --- Chat panel --- */

.chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #303138;
  font-weight: 600;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mark-read-button,
.mark-unread-button,
.mark-all-read-button,
.text-size-btn {
  border: none;
  background: #303138;
  color: #b5b6c0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 400;
}

.mark-read-button:hover,
.mark-unread-button:hover,
.mark-all-read-button:hover,
.text-size-btn:hover:not(:disabled) {
  background: #3a3b44;
  color: #e6e6ea;
}

.text-size-btn {
  font-weight: 600;
}

.text-size-btn:disabled {
  color: #4a4b54;
  cursor: not-allowed;
}

.mark-all-read-button {
  margin: 2px 0 4px;
}

.unread-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  padding: 4px 0;
  border-top: 1px solid #b5519a;
}

.unread-divider-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d199c9;
}

.unread-divider-button {
  margin-left: auto;
  border: none;
  background: #303138;
  color: #b5b6c0;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
}

.unread-divider-button:hover {
  background: #3a3b44;
  color: #e6e6ea;
}

.chat-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-empty {
  color: #6f7078;
  font-size: 14px;
}

.chat-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-message-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-author {
  font-weight: 600;
  font-size: var(--chat-text-size, 14px);
  color: #d199c9;
  flex-shrink: 0;
}

.chat-content-inline {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: var(--chat-text-size, 14px);
  word-break: break-word;
}

.message-list {
  margin: 2px 0;
  padding-left: 22px;
}

.message-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  max-width: 360px;
}

.message-attachment-image-link {
  display: block;
}

.message-attachment-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  display: block;
}

.message-attachment-video {
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
}

.message-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #26272e;
  border-radius: 8px;
  font-size: 13px;
  color: #e6e6ea;
  width: -moz-fit-content;
  width: fit-content;
}

.message-attachment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.attachment-download-link {
  font-size: 11px;
  color: #9a9ba5;
}

.attachment-download-link:hover {
  color: #d199c9;
}

.chat-edited-tag {
  font-size: 11px;
  color: #6f7078;
  font-style: italic;
}

.chat-time {
  font-size: 11px;
  color: #6f7078;
  margin-left: auto;
}

.chat-message-action {
  border: none;
  background: transparent;
  color: #6f7078;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.chat-message-action:hover {
  background: #303138;
  color: #b5b6c0;
}

.chat-message-action-danger:hover {
  background: rgba(255, 82, 82, 0.15);
  color: #ff8a8a;
}

.chat-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}

.chat-edit-form textarea {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #26272e;
  color: #e6e6ea;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.chat-edit-actions {
  display: flex;
  gap: 8px;
}

.chat-edit-actions button {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.chat-edit-actions button:last-child {
  background: #303138;
  color: #e6e6ea;
  font-weight: 400;
}

.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid #303138;
}

.chat-input textarea {
  flex: 1 1;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #26272e;
  color: #e6e6ea;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  max-height: 200px;
  line-height: 1.4;
}

.chat-input button {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
  align-self: flex-end;
}

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 0;
  flex-wrap: wrap;
}

.chat-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #26272e;
  border-radius: 8px;
  padding: 3px;
}

.chat-toolbar-divider {
  width: 1px;
  height: 20px;
  background: #3a3b44;
  margin: 0 2px;
}

.chat-toolbar-btn,
.chat-toolbar > button {
  min-width: 32px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b5b6c0;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease, color 0.1s ease;
}

.chat-toolbar > button {
  background: #26272e;
  padding: 0 12px;
}

.chat-toolbar-btn:hover,
.chat-toolbar > button:hover {
  background: #3a3b44;
  color: #f0f0f4;
}

.chat-toolbar-btn:active,
.chat-toolbar > button:active {
  background: #953c80;
  color: white;
}

.chat-toolbar-btn:disabled,
.chat-toolbar > button:disabled {
  opacity: 0.5;
}

.pending-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 0;
}

.pending-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #26272e;
  border-radius: 999px;
  font-size: 12px;
  color: #e6e6ea;
}

.pending-attachment-chip button {
  border: none;
  background: transparent;
  color: #9a9ba5;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

/* --- Voice room --- */

.voice-room-status {
  padding: 40px;
  color: #9a9ba5;
}

.voice-room-error {
  color: #ff8a8a;
}

/* --- Channel view (chat + thread rail) --- */

.channel-view {
  display: flex;
  flex: 1 1;
  min-height: 0;
}

.stale-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(224, 169, 90, 0.12);
  border-bottom: 1px solid #303138;
}

.stale-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.stale-banner-text {
  color: #e6e6ea;
}

.stale-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.stale-banner-actions button {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: #303138;
  color: #e6e6ea;
  font-size: 12px;
}

.stale-banner-delete {
  background: rgba(255, 82, 82, 0.15) !important;
  color: #ff8a8a !important;
}

.channel-view-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.thread-back-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #303138;
}

.thread-back-link {
  display: block;
  padding: 10px 0;
  font-size: 13px;
  color: #9a9ba5;
}

.thread-header-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.thread-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.thread-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0.7;
}

.thread-item-actions:hover {
  opacity: 1;
}

.chat-thread-start {
  border: none;
  background: transparent;
  color: #6f7078;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.chat-thread-start:hover {
  background: #303138;
  color: #b5b6c0;
}

/* The users list and thread list now stack in a shared right-hand column
   -- .right-rail owns the width/border/scroll that .thread-rail used to
   have on its own, since it's no longer the only thing in that column. */
.right-rail {
  width: 220px;
  flex-shrink: 0;
  min-height: 0;
  border-left: 1px solid #303138;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* An open thread is a full chat panel in its own right (it manages its own
   internal scrolling the same way the main chat does), so the rail itself
   needs to stop scrolling and just get out of the way -- and it earns a
   bit more width since it's no longer just a compact list. */
.right-rail-thread {
  width: 360px;
  overflow-y: hidden;
}

.thread-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.thread-rail {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thread-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.thread-rail-header h3 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7078;
}

.thread-rail-header button {
  border: none;
  background: #303138;
  color: #e6e6ea;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}

.thread-new-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #26272e;
  padding: 10px;
  border-radius: 8px;
}

.thread-new-form input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
  font-size: 13px;
}

.thread-new-form button[type='submit'] {
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.thread-root-hint {
  margin: 0;
  font-size: 11px;
  color: #6f7078;
}

.thread-empty {
  font-size: 13px;
  color: #6f7078;
}

.thread-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thread-link {
  display: block;
  flex: 1 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  color: #b5b6c0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-link:hover {
  background: #26272e;
}

.thread-link.active {
  background: #953c80;
  color: white;
}

.tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px;
  margin-top: 2px;
}

.tag-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  color: white;
  font-weight: 600;
}

.tag-badge-removable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-badge-removable button {
  border: none;
  background: transparent;
  color: white;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  opacity: 0.8;
}

.manage-link {
  color: #d199c9;
}

/* --- Manage page --- */

.manage-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}

.manage-header h1 {
  margin: 8px 0 24px;
  font-size: 20px;
}

.manage-tags {
  background: #26272e;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.manage-tags h2 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #9a9ba5;
}

.manage-tag-list {
  margin-bottom: 12px;
}

.manage-new-tag {
  display: flex;
  gap: 8px;
}

.manage-new-tag input,
.manage-new-tag select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
  font-size: 13px;
}

.manage-new-tag button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

.manage-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #9a9ba5;
}

.manage-toolbar select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
}

.manage-toolbar button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #303138;
  color: #e6e6ea;
  font-size: 13px;
}

.manage-toolbar button:disabled {
  opacity: 0.4;
  cursor: default;
}

.manage-delete-button {
  background: rgba(255, 82, 82, 0.15) !important;
  color: #ff8a8a !important;
  margin-left: auto;
}

.manage-table {
  width: 100%;
  border-collapse: collapse;
  background: #26272e;
  border-radius: 8px;
  overflow: hidden;
}

.manage-table th,
.manage-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #303138;
  font-size: 13px;
}

.manage-table th {
  color: #6f7078;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

.manage-sublabel {
  font-size: 11px;
  color: #6f7078;
}

.manage-row-stale {
  background: rgba(224, 96, 90, 0.06);
}

.manage-stale-flag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  color: #e0a95a;
  border: 1px solid #e0a95a;
  border-radius: 999px;
  padding: 1px 6px;
}

.manage-access-button {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: #303138;
  color: #e6e6ea;
  font-size: 12px;
}

.manage-access-row td {
  background: #1e1f24;
  padding: 16px;
}

.manage-access-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-access-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.manage-access-columns h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7078;
}

.manage-access-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}

.manage-access-actions {
  display: flex;
  gap: 10px;
}

.manage-access-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

.manage-access-actions button:last-child {
  background: #303138;
  color: #e6e6ea;
  font-weight: 400;
}

/* --- Logo / branding --- */

.app-logo {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
}

.app-logo-large {
  display: block;
  height: 160px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 12px;
}

.app-logo-preview {
  display: block;
  height: 64px;
  width: auto;
  object-fit: contain;
  background: #1e1f24;
  border-radius: 8px;
  padding: 8px;
}

.branding-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.branding-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.branding-form input[type='file'] {
  font-size: 12px;
  color: #9a9ba5;
}

.branding-form button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

.branding-size-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #303138;
}

.branding-size-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #9a9ba5;
}

.branding-size-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.branding-size-row input[type='range'] {
  flex: 1 1;
}

.branding-size-row input[type='number'] {
  width: 70px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
  font-size: 13px;
}

.branding-size-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.branding-size-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

/* --- Roles & members --- */

.roles-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #303138;
  flex-wrap: wrap;
}

.roles-edit-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid #303138;
}

.roles-edit-form input[type='text'] {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
  font-size: 13px;
}

.roles-edit-form select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #3a3b44;
  background: #1e1f24;
  color: #e6e6ea;
}

.roles-edit-form button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #b5519a;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

.roles-permission-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9a9ba5;
}

/* --- Media repository --- */

.media-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.media-filter {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: #26272e;
  color: #9a9ba5;
  font-size: 13px;
}

.media-filter.active {
  background: #b5519a;
  color: white;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.media-tile {
  display: flex;
  flex-direction: column;
  background: #26272e;
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
}

.media-tile-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #1e1f24;
}

.media-tile-file {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: #1e1f24;
}

.media-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
}

.media-tile-name {
  font-size: 12px;
  color: #e6e6ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-link-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.voice-channel-entry {
  margin-bottom: 4px;
}

.voice-channel-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-channel-link {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.voice-user-count {
  font-size: 11px;
  color: #9a9ba5;
  background: #303138;
  border-radius: 999px;
  padding: 1px 7px;
}

.voice-channel-toggle {
  border: none;
  background: none;
  color: #6f7078;
  font-size: 11px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.voice-channel-toggle:hover {
  color: #b5b6c0;
}

.voice-channel-users {
  list-style: none;
  margin: 2px 0 4px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.voice-channel-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #b5b6c0;
}

.voice-user-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #3fa76b;
  flex-shrink: 0;
}

.voice-call-dock-wrapper {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.voice-call-dock {
  flex: 1 1;
  display: flex;
  min-height: 0;
}

.voice-call-bar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #26272e;
  border: 1px solid #3a3b44;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 40;
}

.voice-call-bar-label {
  font-size: 13px;
  color: #e6e6ea;
  font-weight: 600;
}

.voice-call-bar-actions {
  display: flex;
  gap: 6px;
}

.voice-call-bar-return {
  border: none;
  background: #953c80;
  color: white;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  text-decoration: none;
}

.voice-call-bar-return:hover {
  background: #a8478f;
}

.voice-call-bar-leave {
  border: none;
  background: #303138;
  color: #b5b6c0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
}

.voice-call-bar-leave:hover {
  background: #3a3b44;
  color: #e6e6ea;
}

.voice-call-bar-mini {
  flex-direction: column;
  align-items: stretch;
  width: 300px;
  gap: 8px;
}

/* LiveKit's default TrackToggle/MediaDeviceMenu buttons are sized for a
   full-width control bar (padding: .625rem 1rem) -- inside the narrow mini
   popout that reads as oversized/cramped, so shrink them here specifically. */
.voice-call-bar-mini .lk-button {
  padding: 0.4rem 0.55rem;
  font-size: 13px;
}

.voice-call-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.voice-call-bar-grid {
  width: 100%;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  background: #1e1f24;
}

.voice-call-bar-grid .lk-grid-layout {
  height: 100%;
}

.voice-call-bar-mini .voice-call-bar-actions {
  justify-content: center;
}

.voice-docked-call {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.voice-docked-grid {
  flex: 1 1;
  min-height: 0;
  padding: 12px;
  position: relative;
}

/* --- Screen share focus/pop-out (#99) --- */
.voice-docked-grid .lk-focus-layout-container,
.voice-docked-grid .lk-focus-layout {
  height: 100%;
}

.voice-docked-clear-pin {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  background: rgba(30, 31, 36, 0.85);
  color: #e6e6ea;
  border: 1px solid #3a3b44;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.voice-docked-clear-pin:hover {
  background: #3a3b44;
}

/* FocusToggle ships as a bare LiveKit button; nudge it to match the
   small expand-icon-in-the-corner look used elsewhere in the call UI. */
.voice-docked-grid .lk-participant-tile .lk-focus-toggle-button {
  padding: 0.3rem 0.45rem;
  font-size: 12px;
}

.voice-docked-grid .lk-grid-layout {
  height: 100%;
}

.voice-docked-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #303138;
  flex-shrink: 0;
}

/* --- Presence --- */

.presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

.presence-online {
  background: #3fa76b;
}

.presence-away {
  background: #e0a95a;
}

.presence-busy {
  background: #e0605a;
}

.presence-offline {
  background: #55565f;
}

/* --- Users list --- */

.users-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.users-list-section h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7078;
}

.users-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.users-list-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #e6e6ea;
}

.users-list-items-offline .users-list-item {
  color: #6f7078;
}

.users-list-self {
  position: relative;
  width: 100%;
}

.users-list-self-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  color: #e6e6ea;
  font-size: 13px;
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
}

.users-list-self-toggle:hover {
  color: #d199c9;
}

.users-list-self-caret {
  margin-left: auto;
  color: #6f7078;
  font-size: 11px;
}

.users-list-status-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  background: #26272e;
  border: 1px solid #3a3b44;
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.users-list-status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: #e6e6ea;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: left;
}

.users-list-status-option:hover {
  background: #303138;
}

.users-list-status-option.active {
  background: #953c80;
  color: white;
}

/* --- Resizable/collapsible thread panel (#50) --- */

.thread-rail-wrapper {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.rail-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
}

.rail-resize-handle:hover {
  background: #953c80;
}

.rail-collapse-toggle {
  width: 22px;
  flex-shrink: 0;
  border: none;
  border-left: 1px solid #303138;
  background: #953c80;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.rail-collapse-toggle:hover {
  background: #b5519a;
}

.right-rail-collapsed {
  width: 0 !important;
  min-width: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* --- 3-dot message action menu (#64) --- */

.message-menu {
  position: relative;
  margin-left: auto;
}

.message-menu-toggle {
  border: none;
  background: transparent;
  color: #6f7078;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
}

.message-menu-toggle:hover {
  background: #303138;
  color: #b5b6c0;
}

.message-menu-popover {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  z-index: 30;
  background: #1c1d22;
  border: 1px solid #303138;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  min-width: 140px;
  overflow: hidden;
}

.message-menu-item {
  border: none;
  background: transparent;
  color: #b5b6c0;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.message-menu-item:hover {
  background: #26272e;
}

.message-menu-item-danger {
  color: #ff8a8a;
}

.message-menu-item-danger:hover {
  background: rgba(255, 82, 82, 0.15);
}

/* --- Browser notification opt-in toggle (#55) --- */

.users-list-notify-toggle {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: 1px solid #303138;
  background: #1c1d22;
  color: #b5b6c0;
  font-size: 12px;
  cursor: pointer;
}

.users-list-notify-toggle:hover {
  background: #26272e;
}

.users-list-notify-toggle.active {
  border-color: #953c80;
  color: #fff;
}

/* --- Starred threads + drag reorder (#52) --- */

.thread-pinned-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f7078;
  margin: 4px 0 2px;
}

.thread-star-btn {
  border: none;
  background: transparent;
  color: #6f7078;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 2px 4px;
  flex-shrink: 0;
}

.thread-star-btn:hover {
  color: #e0c14a;
}

.thread-star-btn.active {
  color: #e0c14a;
}

.thread-list li {
  cursor: -webkit-grab;
  cursor: grab;
}

.thread-list li.thread-item-dragging {
  opacity: 0.4;
}

.thread-list li.thread-item-dragover {
  border-top: 2px solid #953c80;
}

/* --- Hide/unhide threads + channels (#96) --- */

.hidden-section {
  margin-top: 6px;
}

.hidden-section-toggle {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #6f7078;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 2px;
}

.hidden-section-toggle:hover {
  color: #b5b6c0;
}

.thread-list-hidden {
  opacity: 0.7;
}

.thread-link-label-hidden {
  color: #6f7078;
}

.channel-entry-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.channel-entry-row .channel-link {
  flex: 1 1;
  min-width: 0;
  margin-bottom: 0;
}

.channel-hide-btn {
  border: none;
  background: transparent;
  color: #6f7078;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s;
}

.channel-entry-row:hover .channel-hide-btn,
.voice-channel-row:hover .channel-hide-btn {
  opacity: 1;
}

.channel-hide-btn:hover {
  background: #303138;
  color: #b5b6c0;
}

.channel-link-hidden {
  flex: 1 1;
  padding: 6px 8px;
  color: #6f7078;
  font-size: 14px;
}

/* --- In-call mic/camera device menu + chat, draggable mini bar (#93/#94/#95) --- */

.voice-call-bar-device-group,
.voice-docked-control-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.voice-call-bar-drag-handle {
  cursor: -webkit-grab;
  cursor: grab;
  color: #6f7078;
  font-size: 14px;
  padding: 0 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.voice-call-bar-drag-handle:hover {
  color: #b5b6c0;
}

.voice-docked-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.voice-docked-chat {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid #303138;
}

.voice-docked-chat-toggle {
  border: none;
  background: #303138;
  color: #b5b6c0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.voice-docked-chat-toggle:hover {
  background: #3a3b44;
  color: #e6e6ea;
}

.voice-docked-chat-toggle[aria-pressed='true'] {
  background: #953c80;
  color: white;
}

/* --- Emoji reactions, picker, custom server emojis (#97) --- */

.message-inline-emoji {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  object-fit: contain;
}

.message-reaction-trigger {
  position: relative;
}

.message-reaction-trigger-btn {
  border: none;
  background: transparent;
  color: #6f7078;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
}

.message-reaction-trigger-btn:hover {
  background: #303138;
  color: #b5b6c0;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.message-reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #303138;
  background: #1c1d22;
  color: #b5b6c0;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}

.message-reaction-badge:hover {
  border-color: #953c80;
}

.message-reaction-badge.mine {
  background: rgba(149, 60, 128, 0.25);
  border-color: #953c80;
  color: #e6e6ea;
}

.message-reaction-emoji-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.message-reaction-count {
  font-size: 11px;
  color: #8a8b93;
}

.message-reaction-badge.mine .message-reaction-count {
  color: #e6e6ea;
}

.emoji-picker-anchor {
  position: relative;
  display: inline-flex;
}

.emoji-picker-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 360px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: #1c1d22;
  border: 1px solid #303138;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* Anchored from the right edge of the per-message react button instead of
   the left, same reasoning as before (that button sits mid-row, so a
   left-anchored popover could run off the right edge of the chat panel) --
   but no longer flips to open downward. Kris asked for every emoji picker
   to consistently open upward, same as the composer's. */
.message-reaction-trigger .emoji-picker-popover {
  left: auto;
  right: 0;
}

.emoji-picker-search {
  margin: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #303138;
  background: #101114;
  color: #e6e6ea;
  font-size: 13px;
}

.emoji-picker-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 8px;
}

.emoji-picker-section {
  margin-bottom: 10px;
}

.emoji-picker-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6f7078;
  padding: 4px 2px;
}

.emoji-picker-add-btn {
  border: none;
  background: transparent;
  color: #b5519a;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
}

.emoji-picker-add-btn:hover {
  color: #e096cc;
}

.emoji-picker-empty {
  font-size: 12px;
  color: #6f7078;
  padding: 2px;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: 4px;
  gap: 4px;
}

.emoji-picker-item {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px;
  min-width: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.emoji-picker-item:hover {
  background: #303138;
}

.emoji-picker-item-custom img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.emoji-upload-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #101114;
  border: 1px solid #303138;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
}

.emoji-upload-form input[type='text'] {
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid #303138;
  background: #1c1d22;
  color: #e6e6ea;
  font-size: 12px;
}

.emoji-upload-form input[type='file'] {
  font-size: 11px;
  color: #b5b6c0;
}

.emoji-upload-form button {
  border: none;
  background: #953c80;
  color: white;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

.emoji-upload-form button:disabled {
  opacity: 0.5;
  cursor: default;
}

.emoji-upload-error {
  color: #ff8a8a;
  font-size: 11px;
  margin: 0;
}

/* --- Giphy picker + embedded GIF messages (#98) --- */

.gif-picker-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 320px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  background: #1c1d22;
  border: 1px solid #303138;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.gif-picker-scroll {
  overflow-y: auto;
  padding: 0 8px;
  flex: 1 1;
}

.gif-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
  gap: 4px;
  padding-bottom: 8px;
}

.gif-picker-item {
  border: none;
  background: #101114;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1.4;
}

.gif-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gif-picker-item:hover {
  outline: 2px solid #953c80;
}

.gif-picker-attribution {
  font-size: 10px;
  color: #6f7078;
  text-align: center;
  padding: 6px;
  border-top: 1px solid #303138;
}

.message-gif-link {
  display: inline-block;
}

.message-gif {
  max-width: 280px;
  max-height: 280px;
  border-radius: 8px;
  display: block;
}


/* --- Username color picker (#42) --- */

.users-list-color-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #3a3b44;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.users-list-color-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7078;
  padding: 0 8px;
}

.users-list-color-role-note {
  margin: 0;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #6f7078;
}

.users-list-color-role-note strong {
  color: #e6e6ea;
  font-weight: 600;
}

.users-list-color-role-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px;
  font-size: 11px;
  color: #b5b6c0;
  cursor: pointer;
}

.users-list-color-role-toggle input {
  margin: 0;
  cursor: pointer;
}

.users-list-color-role-toggle strong {
  color: #e6e6ea;
  font-weight: 600;
}

.users-list-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 8px;
}

.users-list-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}

.users-list-color-swatch.active {
  border-color: #e6e6ea;
}

.users-list-color-custom {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #6f7078;
  display: flex;
  align-items: center;
  justify-content: center;
}

.users-list-color-custom input[type='color'] {
  width: 28px;
  height: 28px;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
}

.users-list-color-reset {
  align-self: flex-start;
  margin: 0 8px;
  border: none;
  background: transparent;
  color: #6f7078;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.users-list-color-reset:hover {
  color: #e6e6ea;
}

/* --- Per-thread expand/collapse (#51): preview of recent messages --- */

.thread-expand-btn {
  border: none;
  background: none;
  color: #6f7078;
  font-size: 22px;
  line-height: 1;
  padding: 2px 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.thread-expand-btn:hover {
  color: #b5b6c0;
}

.thread-preview {
  margin: 2px 0 2px 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thread-preview-loading,
.thread-preview-empty {
  margin: 0;
  font-size: 11px;
  color: #6f7078;
}

.thread-preview-message {
  margin: 0;
  font-size: 12px;
  color: #b5b6c0;
  line-height: 1.4;
  word-break: break-word;
}

.thread-preview-author {
  font-weight: 600;
  color: #d199c9;
}

/* --- 3-dot thread action menu, mirrors .message-menu (#64) --- */

.thread-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.thread-menu-toggle {
  border: none;
  background: transparent;
  color: #6f7078;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
}

.thread-menu-toggle:hover {
  background: #303138;
  color: #b5b6c0;
}

.thread-menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  background: #1c1d22;
  border: 1px solid #303138;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  min-width: 140px;
  overflow: hidden;
}

.thread-menu-item {
  border: none;
  background: transparent;
  color: #b5b6c0;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.thread-menu-item:hover {
  background: #26272e;
}

.thread-menu-item-danger {
  color: #ff8a8a;
}

.thread-menu-item-danger:hover {
  background: rgba(255, 82, 82, 0.15);
}

/* --- Right-rail panel system: resizable/reorderable/hideable panels --- */

.right-rail-panels {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.right-rail-customize {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px;
  border-bottom: 1px solid #303138;
}

.right-rail-customize-toggle {
  border: none;
  background: transparent;
  color: #6f7078;
  cursor: pointer;
  font-size: 14px;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
}

.right-rail-customize-toggle:hover {
  background: #303138;
  color: #b5b6c0;
}

.right-rail-customize-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  z-index: 40;
  background: #1c1d22;
  border: 1px solid #303138;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 6px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.right-rail-customize-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #e6e6ea;
  cursor: pointer;
}

.right-rail-customize-option:hover {
  background: #26272e;
}

.right-rail-customize-option.disabled {
  color: #6f7078;
  cursor: not-allowed;
}

.right-rail-customize-option input {
  margin: 0;
}

.right-rail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.right-rail-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7078;
  border-bottom: 1px solid #303138;
  flex-shrink: 0;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.right-rail-panel-drag-handle {
  color: #4a4b54;
}

.right-rail-panel-body {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
}

.right-rail-panel-resize-handle {
  height: 6px;
  flex-shrink: 0;
  cursor: row-resize;
  background: #303138;
  border-top: 1px solid #3a3b44;
  border-bottom: 1px solid #3a3b44;
}

.right-rail-panel-resize-handle:hover {
  background: #953c80;
  border-color: #953c80;
}

.right-rail-panel-dragging {
  opacity: 0.5;
}

.right-rail-panel-dragover .right-rail-panel-header {
  background: #26272e;
}

/* --- Saved messages panel (#53) -- reuses .thread-preview-author for the
   sender name and .thread-empty for the empty state, matching ThreadList's
   conventions. --- */

.saved-messages-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.saved-message-item {
  padding: 6px 12px;
  border-bottom: 1px solid #26272e;
}

.saved-message-item:last-child {
  border-bottom: none;
}

.saved-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.saved-message-location {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #b5b6c0;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-message-location:hover {
  color: #d199c9;
  text-decoration: underline;
}

.saved-message-unstar-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #d199c9;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
}

.saved-message-unstar-btn:hover {
  color: #ec6cb9;
}

.saved-message-body {
  margin: 2px 0 0;
  font-size: 12px;
  color: #b5b6c0;
  line-height: 1.4;
  word-break: break-word;
}

/* --- "Jump to message" highlight flash (Saved panel jump-to) --- */

@keyframes chat-message-flash {
  0% {
    background: rgba(149, 60, 128, 0.35);
  }
  100% {
    background: transparent;
  }
}

.chat-message-highlight {
  animation: chat-message-flash 2s ease-out;
  border-radius: 6px;
}

/* --- Channel pin badge (inline, next to the author) --- */

.chat-pin-badge {
  font-size: 12px;
  flex-shrink: 0;
}

/* --- Pinned messages panel -- mirrors the Saved panel's list styling --- */

.pinned-messages-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.pinned-message-item {
  padding: 6px 12px;
  border-bottom: 1px solid #26272e;
}

.pinned-message-item:last-child {
  border-bottom: none;
}

.pinned-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pinned-message-jump-btn {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #b5b6c0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-message-jump-btn:hover {
  color: #d199c9;
  text-decoration: underline;
}

.pinned-message-unpin-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #d199c9;
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
}

.pinned-message-unpin-btn:hover {
  color: #ec6cb9;
}

.pinned-message-body {
  margin: 2px 0 0;
  font-size: 12px;
  color: #b5b6c0;
  line-height: 1.4;
  word-break: break-word;
}

.pinned-message-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: #6f7078;
}

/* --- "New version available" banner (UpdateBanner.tsx) -- mounted once in
   the root layout, so this needs to work on every page, not just inside
   an authenticated server shell. --- */

.update-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #26272e;
  border: 1px solid #3a3b44;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  color: #e6e6ea;
  max-width: min(90vw, 360px);
}

.update-banner-refresh {
  border: none;
  background: #953c80;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.update-banner-refresh:hover {
  background: #ab4894;
}

.update-banner-dismiss {
  border: none;
  background: none;
  color: #6f7078;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}

.update-banner-dismiss:hover {
  color: #b5b6c0;
}

/* reply-and-search (#68) */
.global-search {
  position: relative;
  padding: 8px 12px;
}
.global-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #3a3a3a);
  background: var(--input-bg, #1e1e1e);
  color: inherit;
}
.global-search-results {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  z-index: 50;
  margin-top: 4px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel-bg, #202020);
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 8px 0;
}
.global-search-empty {
  padding: 10px 14px;
  opacity: 0.7;
  margin: 0;
}
.global-search-group h4 {
  margin: 6px 14px 4px;
  font-size: 0.75em;
  text-transform: uppercase;
  opacity: 0.6;
}
.global-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 14px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.global-search-result:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}
.global-search-result-meta {
  opacity: 0.6;
  font-size: 0.85em;
}
.global-search-message-snippet {
  opacity: 0.75;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-search-message-result {
  display: flex;
  align-items: center;
}
.global-search-message-result .global-search-result {
  flex: 1 1;
  min-width: 0;
}
.global-search-reply-btn {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 6px 10px;
}
.global-search-reply-btn:hover {
  opacity: 1;
}

.reply-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--hover-bg, rgba(255, 255, 255, 0.05));
  border-left: 3px solid var(--accent-color, #b5519a);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
  max-width: 100%;
  cursor: pointer;
  text-align: left;
}
.reply-quote-unavailable {
  cursor: default;
  opacity: 0.6;
  border-left-color: var(--border-color, #3a3a3a);
}
.reply-quote-author {
  font-weight: 600;
  font-size: 0.85em;
  opacity: 0.85;
}
.reply-quote-snippet {
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

.composer-reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--hover-bg, rgba(255, 255, 255, 0.05));
  border-left: 3px solid var(--accent-color, #b5519a);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 0.9em;
}
.composer-reply-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-reply-cancel {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
}
.composer-reply-cancel:hover {
  opacity: 1;
}

/* reply-and-search (#68) color fix */
.reply-quote {
  color: inherit;
  font: inherit;
  border: none;
  border-left: 3px solid var(--accent-color, #b5519a);
}

/* infinite-scroll history */
.chat-loading-older,
.chat-history-start {
  text-align: center;
  font-size: 0.85em;
  opacity: 0.6;
  padding: 6px 0;
  margin: 0;
}

/* direct-messages (#57) -- phase 3: nav rail + DM sidebar/picker */
.app-shell {
  display: flex;
  height: 100%;
}
.app-rail {
  width: 64px;
  flex-shrink: 0;
  background: #1c1d22;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
  overflow-y: auto;
}
.app-rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #2c2d34;
  color: #e6e6ea;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  position: relative;
}
.app-rail-icon:hover {
  border-radius: 12px;
  background: #34353d;
}
.app-rail-icon.active {
  background: var(--accent-color, #b5519a);
  color: #fff;
  border-radius: 12px;
}
.app-rail-home,
.app-rail-dm {
  font-size: 18px;
}
.app-rail-dm {
  margin-top: auto;
}
.app-rail-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-color, #b5519a);
  border: 2px solid #1c1d22;
}
.app-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
.dm-picker-panel {
  background: var(--hover-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-picker-input {
  width: 100%;
  box-sizing: border-box;
}
.dm-picker-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  background: none;
  border: none;
  color: inherit;
}
.dm-picker-row:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.08));
}
.dm-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dm-picker-chip {
  background: var(--accent-color, #b5519a);
  color: #fff;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.8em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dm-picker-chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 1em;
  line-height: 1;
}
.dm-picker-actions {
  display: flex;
  gap: 8px;
}
.dm-sidebar-empty {
  padding: 4px 0;
  opacity: 0.6;
  font-size: 0.85em;
}
.users-list-member-name {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.users-list-member-name:hover {
  text-decoration: underline;
}
.mention-pill {
  display: inline-flex;
  align-items: center;
  background: var(--hover-bg, rgba(181, 81, 154, 0.18));
  color: var(--accent-color, #b5519a);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.mention-pill:hover {
  text-decoration: underline;
}

/* direct-messages (#57) -- phase 4: emoji picker placement + mention autocomplete */
.emoji-picker-popover-down {
  bottom: auto;
  top: calc(100% + 6px);
}
.chat-input-wrapper {
  position: relative;
}
.mention-suggestions {
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  margin-bottom: 6px;
  background: #1c1d22;
  border: 1px solid #303138;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.mention-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
}
.mention-suggestion:hover,
.mention-suggestion.active {
  background: #3a3b44;
}

/* profiles initiative -- avatars, bios, click-a-name popup, server icons */
.app-rail-icon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.user-profile-card {
  /* position/left/top are set inline by UserProfileCard.tsx, computed from
     the trigger's bounding rect and clamped to the viewport -- see the
     comment on its useLayoutEffect for why this can't be a plain CSS
     `position: absolute; left: 100%` rule. */
  z-index: 40;
  width: 240px;
  background: var(--surface-raised, #26232b);
  border: 1px solid var(--border, #3a3640);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 14px;
}
.user-profile-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.user-profile-card-close:hover {
  opacity: 1;
}
.user-profile-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-profile-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-profile-card-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-muted, #4a4356);
  font-weight: 600;
  font-size: 15px;
}
.user-profile-card-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.user-profile-card-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.user-profile-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.75;
}
.user-profile-card-bio {
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.user-profile-card-message-button {
  width: 100%;
  padding: 8px 0;
  border-radius: 6px;
  border: none;
  background: var(--accent, #7c8cf0);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.user-profile-card-message-button:disabled {
  opacity: 0.6;
  cursor: default;
}
.users-list-avatar-section,
.users-list-bio-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #3a3640);
}
.users-list-avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.users-list-avatar-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.users-list-avatar-preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-muted, #4a4356);
  font-weight: 600;
  font-size: 13px;
}
.users-list-avatar-actions {
  display: flex;
  gap: 8px;
}
.users-list-avatar-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface, #322e38);
  font-size: 12px;
  cursor: pointer;
}
.users-list-avatar-upload input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.users-list-avatar-remove {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 12px;
  cursor: pointer;
}
.users-list-avatar-remove:hover {
  opacity: 1;
}
.users-list-bio-input {
  width: 100%;
  margin-top: 6px;
  min-height: 60px;
  resize: vertical;
  background: var(--surface, #322e38);
  border: 1px solid var(--border, #3a3640);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  padding: 8px;
  box-sizing: border-box;
}
.users-list-bio-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.users-list-bio-count {
  font-size: 11px;
  opacity: 0.6;
}
.users-list-bio-save {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: var(--accent, #7c8cf0);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.users-list-bio-save:disabled {
  opacity: 0.5;
  cursor: default;
}

/* profiles initiative -- phase 2: click-everywhere + self-note + upload error */
.users-list-avatar-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: #f2555a;
}
.user-profile-card-self-note {
  margin: 12px 0 0;
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
}
.chat-author-name {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.chat-author-name:hover {
  text-decoration: underline;
}
.mention-pill-wrap {
  display: inline-block;
}

/* profiles initiative -- phase 4: server icon upload UI (manage page) */
.manage-icon-section {
  margin-bottom: 24px;
}
.manage-icon-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.manage-icon-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.manage-icon-preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-muted, #4a4356);
  font-weight: 600;
  font-size: 16px;
}
.manage-icon-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.manage-icon-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--surface, #322e38);
  font-size: 13px;
  cursor: pointer;
}
.manage-icon-upload input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.manage-icon-remove {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 13px;
  cursor: pointer;
}
.manage-icon-remove:hover {
  opacity: 1;
}
.manage-icon-actions .manage-sublabel {
  flex-basis: 100%;
  margin: 4px 0 0;
}

/* profiles initiative -- phase 5: rail icon fills its box (no background
   showing through the padding meant for the initials text), fixes the
   date-format hydration mismatch on the manage page */
.app-rail-icon {
  position: relative;
}
.app-rail-icon-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* profiles initiative -- phase 6: the rail icon's own background color
   (needed for the plain emoji/initials case) was still showing through
   any transparent areas of an uploaded icon image -- phase 5 only fixed
   the box-sizing, not this. Suppressed specifically when a real icon
   image is present, so the emoji/initials tiles keep their colored
   background untouched. */
.app-rail-icon:has(.app-rail-icon-image) {
  background: transparent;
}

/* global search redesign -- rail icon + overlay, replaces the old always-
   present inline bar (that inline bar's own height was the actual source
   of the "have to scroll to see the sidebar" complaint) */
.app-rail-search {
  border: none;
  font: inherit;
  cursor: pointer;
}
.search-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(0, 0, 0, 0.55);
}
.search-overlay-panel {
  width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 600px);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised, #26232b);
  border: 1px solid var(--border, #3a3640);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.search-overlay-input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  font-size: 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border, #3a3640);
  color: inherit;
  outline: none;
}
.search-overlay-results {
  overflow-y: auto;
  padding: 8px;
}
.search-overlay-empty {
  padding: 12px;
  opacity: 0.6;
  font-size: 13px;
  margin: 0;
}
.search-overlay-group {
  margin-bottom: 8px;
}
.search-overlay-group h4 {
  margin: 8px 8px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
}
.search-overlay-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.search-overlay-result:hover {
  background: var(--surface, #322e38);
}
.search-overlay-result-meta {
  opacity: 0.55;
  font-size: 12px;
}
.search-overlay-message-result {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.search-overlay-message-result .search-overlay-result {
  flex: 1 1;
  min-width: 0;
}
.search-overlay-message-snippet {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-overlay-reply-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 16px;
  padding: 0 8px;
}
.search-overlay-reply-btn:hover {
  opacity: 1;
}

/* emoji visibility overhaul follow-up -- manage-my-emoji + unpin-without-delete UI */
.users-list-emoji-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #3a3640);
}
.users-list-emoji-empty {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.6;
}
.users-list-emoji-items {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.users-list-emoji-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface, #322e38);
}
.users-list-emoji-thumb {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.users-list-emoji-name {
  font-size: 12px;
  font-family: monospace;
  overflow-wrap: anywhere;
}
.users-list-emoji-pin-badge {
  font-size: 11px;
  opacity: 0.75;
  margin-left: auto;
  white-space: nowrap;
}
.users-list-emoji-pin-badge-none {
  opacity: 0.5;
}
.users-list-emoji-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.users-list-emoji-unpin,
.users-list-emoji-delete {
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 11px;
  cursor: pointer;
}
.users-list-emoji-unpin:hover,
.users-list-emoji-delete:hover {
  opacity: 1;
}
.users-list-emoji-delete {
  color: #f2555a;
}
.manage-pinned-emoji-section {
  margin-bottom: 24px;
}
.manage-pinned-emoji-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.manage-pinned-emoji-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface, #322e38);
}
.manage-pinned-emoji-thumb {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.manage-pinned-emoji-name {
  font-size: 13px;
  font-family: monospace;
}
.manage-pinned-emoji-item .manage-sublabel {
  margin: 0;
  margin-right: auto;
}
.manage-pinned-emoji-unpin {
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.manage-pinned-emoji-unpin:hover {
  opacity: 1;
}

/* group DM participant management (#57 follow-up) */
.dm-participants-anchor {
  position: relative;
  display: inline-flex;
}
.dm-participants-toggle {
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.dm-participants-toggle:hover {
  opacity: 1;
  background: var(--surface, #322e38);
}
.dm-participants-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface-raised, #26232b);
  border: 1px solid var(--border, #3a3640);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-size: 13px;
}
.dm-participants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.dm-participants-add-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: var(--surface, #322e38);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dm-participants-add-panel {
  border-top: 1px solid var(--border, #3a3640);
  border-bottom: 1px solid var(--border, #3a3640);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-participants-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dm-participants-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
}
.dm-participants-item:hover {
  background: var(--surface, #322e38);
}
.dm-participants-name {
  overflow-wrap: anywhere;
}
.dm-participants-you {
  opacity: 0.6;
  font-size: 12px;
}
.dm-participants-remove {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 12px;
  cursor: pointer;
}
.dm-participants-remove:hover {
  opacity: 1;
}

/* per-user notification settings (#56) */
.server-mute-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 13px;
  cursor: pointer;
}
.server-mute-btn:hover {
  opacity: 1;
  background: var(--surface, #322e38);
}
.settings-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
}
.settings-page h2 {
  margin: 0 0 16px;
}
.settings-section {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border, #3a3640);
}
.settings-section:last-child {
  border-bottom: none;
}
.settings-section h3 {
  margin: 0 0 8px;
}
.settings-section h4 {
  margin: 16px 0 6px;
  font-size: 13px;
  opacity: 0.7;
}
.settings-hint {
  opacity: 0.75;
  font-size: 13px;
  margin: 0 0 10px;
}
.settings-mute-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-mute-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface, #322e38);
}