synpad 0.1.0

/* ==========================================================================
   Netrix - Matrix Chat Client
   Main stylesheet with dark theme default
   ========================================================================== */

/* CSS Custom Properties (Design Tokens) */
:root {
  /* Colors - Dark Theme */
  --bg-primary: #15191e;
  --bg-secondary: #1c2026;
  --bg-tertiary: #21262c;
  --bg-canvas: #0d1117;
  --bg-hover: #282e36;
  --bg-active: #2d333b;

  --text-primary: #ffffff;
  --text-secondary: #a9b2bc;
  --text-disabled: #6b7785;
  --text-link: #6cb6ff;

  --accent-primary: #0dbd8b;
  --accent-primary-hover: #0aa87a;
  --accent-danger: #ff5b55;
  --accent-danger-hover: #e04e49;
  --accent-success: #0dbd8b;
  --accent-warning: #ffc56d;

  --border-default: #2a3038;
  --border-focused: #6cb6ff;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Font */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 24px;
  --font-size-heading: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Layout */
  --spaces-bar-width: 68px;
  --room-list-width: 300px;
  --right-panel-width: 320px;
  --room-header-height: 64px;
  --composer-min-height: 56px;
}

/* ========== Reset & Base ========== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main {
  height: 100%;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
}

/* ========== Scrollbar ========== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-disabled);
}

/* ========== Spinner ========== */

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--small {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========== Buttons ========== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent-primary);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}

.btn--secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
}

.btn--danger {
  background: var(--accent-danger);
  color: #fff;
}

.btn--danger:hover:not(:disabled) {
  background: var(--accent-danger-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn--sm { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); }
.btn--md { padding: var(--space-sm) var(--space-lg); }
.btn--lg { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-lg); }

/* ========== Auth Layout ========== */

.auth-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-canvas);
}

.auth-layout__container {
  width: 100%;
  max-width: 420px;
  padding: var(--space-xxl);
}

.auth-layout__brand {
  text-align: center;
  margin-bottom: var(--space-xxl);
}

.auth-layout__title {
  font-size: var(--font-size-heading);
  font-weight: 700;
  color: var(--accent-primary);
}

.auth-layout__subtitle {
  color: var(--text-secondary);
  margin-top: var(--space-sm);
}

/* ========== Login/Register Forms ========== */

.login-form,
.register-form,
.password-reset-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.login-form__title,
.register-form__title {
  font-size: var(--font-size-xl);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.login-form__field,
.register-form__field,
.password-reset-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.login-form__field label,
.register-form__field label,
.password-reset-form__field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.login-form__field input,
.register-form__field input,
.password-reset-form__field input {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.login-form__field input:focus,
.register-form__field input:focus,
.password-reset-form__field input:focus {
  border-color: var(--border-focused);
}

.login-form__submit,
.register-form__submit,
.password-reset-form__submit {
  padding: var(--space-md);
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.login-form__submit:hover:not(:disabled),
.register-form__submit:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}

.login-form__submit:disabled,
.register-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-form__error,
.register-form__error,
.password-reset-form__error {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 91, 85, 0.15);
  border: 1px solid var(--accent-danger);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

.login-page__footer,
.register-page__footer,
.forgot-password-page__footer {
  text-align: center;
  margin-top: var(--space-xl);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* ========== Main Layout ========== */

.main-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main-layout__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: var(--space-lg);
  color: var(--text-secondary);
}

.main-layout__spaces {
  width: var(--spaces-bar-width);
  background: var(--bg-canvas);
  border-right: 1px solid var(--border-default);
  flex-shrink: 0;
  overflow-y: auto;
}

.main-layout__room-list {
  width: var(--room-list-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-default);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-layout__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}

.main-layout__right-panel {
  width: var(--right-panel-width);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  flex-shrink: 0;
  overflow-y: auto;
}

/* ========== Spaces Bar ========== */

.spaces-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 0;
  gap: var(--space-sm);
}

.spaces-bar__item {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: var(--font-size-lg);
}

.spaces-bar__item:hover {
  background: var(--bg-hover);
  border-radius: var(--radius-md);
}

.spaces-bar__item--active {
  background: var(--accent-primary);
  border-radius: var(--radius-md);
}

.spaces-bar__divider {
  width: 32px;
  height: 1px;
  background: var(--border-default);
  margin: var(--space-xs) 0;
}

.spaces-bar__create {
  background: transparent;
  border: 2px dashed var(--border-default);
  color: var(--text-disabled);
}

.spaces-bar__create:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* ========== Room List ========== */

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

.room-list-panel__list {
  flex: 1;
  overflow-y: auto;
}

.room-list-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-disabled);
  text-align: center;
  padding: var(--space-xl);
}

.room-list-panel__empty-hint {
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

/* Room List Header */

.room-list-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.room-list-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.room-list-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.room-list-header__name {
  font-weight: 600;
  font-size: var(--font-size-md);
}

.room-list-header__search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  font-size: var(--font-size-sm);
}

.room-list-header__search-input:focus {
  border-color: var(--border-focused);
}

/* Room Filter Tabs */

.room-filter-tabs {
  display: flex;
  padding: var(--space-xs) var(--space-sm);
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border-default);
}

.room-filter-tabs__tab {
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.15s;
}

.room-filter-tabs__tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.room-filter-tabs__tab--active {
  background: var(--bg-active);
  color: var(--text-primary);
}

/* Room List Entry */

.room-list-entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: background 0.1s;
}

.room-list-entry:hover {
  background: var(--bg-hover);
}

.room-list-entry--selected {
  background: var(--bg-active);
}

.room-list-entry--unread .room-list-entry__name {
  font-weight: 700;
}

.room-list-entry__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-list-entry__top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.room-list-entry__name {
  font-size: var(--font-size-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-list-entry__time {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

.room-list-entry__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-list-entry__preview {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Unread Badge ========== */

.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--text-disabled);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.unread-badge--highlight {
  background: var(--accent-danger);
}

/* ========== Avatar ========== */

.avatar {
  position: relative;
  border-radius: var(--radius-circle);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-circle);
}

.avatar__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-circle);
  text-transform: uppercase;
}

/* ========== Room Screen ========== */

.room-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Room Header */

.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--room-header-height);
  padding: 0 var(--space-xl);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
  flex-shrink: 0;
}

.room-header__info {
  flex: 1;
  min-width: 0;
}

.room-header__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.room-header__name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-header__encrypted-icon {
  font-size: var(--font-size-sm);
}

.room-header__topic {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.room-header__actions {
  display: flex;
  gap: var(--space-sm);
}

.room-header__action-btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  transition: all 0.15s;
}

.room-header__action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ========== Timeline ========== */

.timeline-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
}

.timeline-panel__messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-disabled);
  text-align: center;
}

.timeline-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.timeline-panel__read-marker {
  display: flex;
  align-items: center;
  padding: var(--space-sm) 0;
}

.timeline-panel__read-marker span {
  padding: 0 var(--space-md);
  color: var(--accent-danger);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.timeline-panel__read-marker::before,
.timeline-panel__read-marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent-danger);
}

.timeline-panel__jump-bottom {
  position: sticky;
  bottom: var(--space-lg);
  align-self: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s;
}

.timeline-panel__jump-bottom:hover {
  transform: translateY(-2px);
}

/* Event Tile */

.event-tile {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  position: relative;
}

.event-tile:hover {
  background: var(--bg-hover);
}

.event-tile--state {
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
}

.event-tile__state-text {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  font-style: italic;
}

.event-tile__avatar {
  flex-shrink: 0;
  padding-top: 2px;
}

.event-tile__content {
  flex: 1;
  min-width: 0;
}

.event-tile__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 2px;
}

.event-tile__sender {
  font-weight: 600;
  font-size: var(--font-size-md);
}

.event-tile__time {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.event-tile__edited {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  font-style: italic;
}

.event-tile__actions {
  position: absolute;
  top: -12px;
  right: var(--space-md);
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.event-tile__action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

.event-tile__action-btn:hover {
  background: var(--bg-hover);
}

/* Message Content */

.message-content {
  word-break: break-word;
  line-height: 1.5;
}

.message-content--text p {
  margin: 0;
}

.message-content--text a {
  color: var(--text-link);
}

.message-content--text code {
  padding: 1px 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
}

.message-content--text pre {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-sm) 0;
}

.message-content--text pre code {
  padding: 0;
  background: none;
}

.message-content--text blockquote {
  border-left: 3px solid var(--border-default);
  padding-left: var(--space-md);
  color: var(--text-secondary);
  margin: var(--space-sm) 0;
}

.message-content--image img {
  max-width: 100%;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.message-content--file {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  max-width: 360px;
}

.message-content__file-icon {
  font-size: 24px;
}

.message-content__file-info {
  flex: 1;
  min-width: 0;
}

.message-content__file-name {
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-content__file-meta {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.message-content__file-download {
  color: var(--accent-primary);
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.message-content--emote {
  font-style: italic;
  color: var(--text-secondary);
}

.message-content--notice {
  color: var(--text-secondary);
  font-style: italic;
}

.message-content--redacted {
  color: var(--text-disabled);
  font-style: italic;
}

.message-content--error {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--accent-danger);
  font-style: italic;
}

.message-content--sticker .message-content__sticker-img {
  max-width: 160px;
  max-height: 160px;
}

/* Reply Preview */

.reply-preview {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  cursor: pointer;
}

.reply-preview__bar {
  width: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.reply-preview__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--font-size-sm);
}

.reply-preview__sender {
  font-weight: 600;
  color: var(--accent-primary);
}

.reply-preview__body {
  color: var(--text-secondary);
}

/* Reactions */

.reaction-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.reaction-list__item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all 0.15s;
}

.reaction-list__item:hover {
  background: var(--bg-hover);
}

.reaction-list__item--active {
  border-color: var(--accent-primary);
  background: rgba(13, 189, 139, 0.15);
}

.reaction-list__count {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.reaction-list__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-disabled);
  font-size: var(--font-size-sm);
}

.reaction-list__add:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* Day Separator */

.day-separator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

.day-separator__line {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.day-separator__text {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  font-weight: 600;
  text-transform: uppercase;
}

/* Typing Indicator */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.typing-indicator__dots {
  display: flex;
  gap: 3px;
}

.typing-indicator__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-disabled);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

/* ========== Message Input ========== */

.message-input {
  border-top: 1px solid var(--border-default);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-primary);
  flex-shrink: 0;
}

.message-input__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.message-input__textarea {
  flex: 1;
  min-height: 40px;
  max-height: 200px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  outline: none;
  resize: none;
  line-height: 1.5;
  font-size: var(--font-size-md);
}

.message-input__textarea:focus {
  border-color: var(--border-focused);
}

.message-input__textarea::placeholder {
  color: var(--text-disabled);
}

.message-input__attach-btn,
.message-input__emoji-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-input__attach-btn:hover,
.message-input__emoji-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.message-input__send-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--accent-primary);
  border-radius: var(--radius-circle);
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.message-input__send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.message-input__send-btn:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}

/* Reply Bar */

.reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.reply-bar__content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.reply-bar__label {
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  font-weight: 500;
}

.reply-bar__cancel {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-disabled);
  border-radius: var(--radius-sm);
}

.reply-bar__cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ========== Welcome Screen ========== */

.welcome-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.welcome-screen__content {
  text-align: center;
  max-width: 480px;
  padding: var(--space-xxl);
}

.welcome-screen__title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: var(--space-md);
}

.welcome-screen__subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-xxl);
}

.welcome-screen__tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: left;
}

.welcome-screen__tip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.welcome-screen__tip-icon {
  font-size: 24px;
}

.welcome-screen__tip p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* ========== Settings ========== */

.settings-screen {
  display: flex;
  height: 100%;
}

.settings-screen__tabs {
  width: 200px;
  border-right: 1px solid var(--border-default);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-screen__tab {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
}

.settings-screen__tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-screen__tab--active {
  background: var(--bg-active);
  color: var(--text-primary);
}

.settings-screen__content {
  flex: 1;
  padding: var(--space-xl);
  overflow-y: auto;
}

.settings-section {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-default);
}

.settings-section--danger {
  border-bottom: none;
  padding: var(--space-lg);
  background: rgba(255, 91, 85, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 91, 85, 0.2);
}

.settings-field {
  margin-bottom: var(--space-lg);
}

.settings-field label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.settings-field__value {
  color: var(--text-primary);
  font-family: monospace;
}

.settings-field__input-row {
  display: flex;
  gap: var(--space-sm);
}

.settings-field__input-row input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
}

.settings-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-primary);
}

.settings-toggle__label {
  display: block;
  font-weight: 500;
}

.settings-toggle__description {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.settings-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

/* Theme Selector */

.theme-selector {
  display: flex;
  gap: var(--space-md);
}

.theme-selector__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: transparent;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-primary);
}

.theme-selector__option:hover {
  border-color: var(--text-disabled);
}

.theme-selector__option--active {
  border-color: var(--accent-primary);
}

.theme-selector__preview {
  width: 64px;
  height: 48px;
  border-radius: var(--radius-md);
}

.theme-selector__preview--light { background: #fff; border: 1px solid #ddd; }
.theme-selector__preview--dark { background: #15191e; border: 1px solid #2a3038; }
.theme-selector__preview--system { background: linear-gradient(135deg, #fff 50%, #15191e 50%); border: 1px solid #888; }

/* ========== Right Panel ========== */

.right-panel {
  padding: var(--space-lg);
}

.right-panel h3 {
  margin-bottom: var(--space-lg);
}

/* ========== Modal ========== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal__dialog {
  position: relative;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal__dialog--wide {
  max-width: 640px;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-default);
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.modal__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
}

.modal__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal__body {
  padding: var(--space-xl);
  overflow-y: auto;
}

/* ========== Confirmation Dialog ========== */

.confirmation-dialog {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirmation-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.confirmation-dialog__content {
  position: relative;
  width: 90%;
  max-width: 400px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.confirmation-dialog__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.confirmation-dialog__message {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.confirmation-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ========== Toast ========== */

.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 280px;
  animation: slideIn 0.3s ease;
}

.toast--info { background: var(--bg-tertiary); border-left: 4px solid var(--text-link); }
.toast--success { background: var(--bg-tertiary); border-left: 4px solid var(--accent-success); }
.toast--warning { background: var(--bg-tertiary); border-left: 4px solid var(--accent-warning); }
.toast--error { background: var(--bg-tertiary); border-left: 4px solid var(--accent-danger); }

.toast__close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-disabled);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ========== Read Receipts ========== */

.read-receipts {
  display: flex;
  align-items: center;
  gap: -4px;
  margin-top: var(--space-xs);
}

.read-receipts__overflow {
  font-size: 10px;
  color: var(--text-disabled);
  margin-left: var(--space-xs);
}

/* ========== Search Input ========== */

.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.search-input__icon {
  color: var(--text-disabled);
  font-size: var(--font-size-sm);
}

.search-input__field {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  outline: none;
}

.search-input__clear {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-disabled);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* ========== Verification Modal ========== */

.verification-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.verification-modal__dialog {
  position: relative;
  width: 90%;
  max-width: 480px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.verification-modal__emojis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

.verification-modal__emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.verification-modal__emoji-icon {
  font-size: 32px;
}

.verification-modal__emoji-name {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.verification-modal__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ========== Emoji Picker ========== */

.emoji-picker {
  width: 320px;
  max-height: 360px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.emoji-picker__search {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-default);
}

.emoji-picker__search input {
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
}

.emoji-picker__categories {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.emoji-picker__section-title {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--space-sm);
}

.emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-picker__emoji {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-picker__emoji:hover {
  background: var(--bg-hover);
}

/* ========== Context Menu ========== */

.context-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.context-menu {
  position: absolute;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: var(--space-xs);
  z-index: 1000;
}

.context-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.context-menu__item:hover {
  background: var(--bg-hover);
}

.context-menu__item--danger {
  color: var(--accent-danger);
}

.context-menu__item--disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.room-context-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.room-context-menu__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--space-xs);
}

.room-context-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.room-context-menu__item:hover {
  background: var(--bg-hover);
}

.room-context-menu__item--danger {
  color: var(--accent-danger);
}

.room-context-menu__divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-xs) 0;
}

/* ========== Session Settings ========== */

.session-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.session-card__icon { font-size: 24px; }
.session-card__info { flex: 1; }
.session-card__name { display: block; font-weight: 500; }
.session-card__detail { font-size: var(--font-size-sm); color: var(--text-secondary); }

.session-card__badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.session-card__badge--verified {
  background: rgba(13, 189, 139, 0.15);
  color: var(--accent-success);
}

/* ========== Security Status ========== */

.security-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.security-status__icon { font-size: 24px; }
.security-status__label { display: block; font-weight: 500; }
.security-status__description { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ========== Thread Summary ========== */

.thread-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: transparent;
  border: none;
  color: var(--text-link);
  cursor: pointer;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

.thread-summary:hover {
  background: var(--bg-hover);
}

.thread-summary__latest {
  color: var(--text-secondary);
}

/* ========== Mention/Command Autocomplete ========== */

.mention-autocomplete,
.command-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
}

.mention-autocomplete__item,
.command-autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
}

.mention-autocomplete__item:hover,
.command-autocomplete__item:hover {
  background: var(--bg-hover);
}

.mention-autocomplete__name,
.command-autocomplete__name {
  font-weight: 500;
}

.mention-autocomplete__id {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.command-autocomplete__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ========== Right Panel Components ========== */

.room-info-panel {
  padding: var(--space-lg);
}

.room-info-panel__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.room-info-panel__name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-top: var(--space-md);
}

.room-info-panel__topic {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

.member-list-panel {
  padding: var(--space-lg);
}

.member-list-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  cursor: pointer;
}

.member-list-panel__item:hover {
  opacity: 0.8;
}

.member-list-panel__name {
  font-weight: 500;
}

.member-list-panel__role {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* ========== Rich Text Editor ========== */

.rich-text-editor__toolbar {
  display: flex;
  gap: 2px;
  padding: var(--space-xs);
  border-bottom: 1px solid var(--border-default);
}

.rich-text-editor__tool-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.rich-text-editor__tool-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ========== Media Components ========== */

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}

.image-viewer img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.upload-bar {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.upload-bar__progress {
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-xs);
}

.upload-bar__progress-fill {
  height: 100%;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}

/* ==========================================================================
   Phase 3-9 Component Styles
   ========================================================================== */

/* ========== Event Tile: More Menu & React Picker ========== */

.event-tile__more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 180px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  margin-top: var(--space-xs);
}

.event-tile__more-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-align: left;
  white-space: nowrap;
}

.event-tile__more-item:hover {
  background: var(--bg-hover);
}

.event-tile__more-item--danger {
  color: var(--accent-danger);
}

.event-tile__more-item--danger:hover {
  background: rgba(255, 91, 85, 0.1);
}

.event-tile__react-picker {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-xs);
}

.event-tile__react-emoji {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.1s;
}

.event-tile__react-emoji:hover {
  background: var(--bg-hover);
  transform: scale(1.2);
}

.event-source__content {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: var(--font-size-sm);
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  line-height: 1.6;
}

.reaction-list__emoji {
  font-size: 16px;
}

/* ========== Forward Dialog ========== */

.forward-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.forward-dialog__preview {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-primary);
}

.forward-dialog__preview-label {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.forward-dialog__preview-body {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-dialog__selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.forward-dialog__search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  font-size: var(--font-size-sm);
}

.forward-dialog__search-input:focus {
  border-color: var(--border-focused);
}

.forward-dialog__room-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forward-dialog__room-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.forward-dialog__room-item:hover {
  background: var(--bg-hover);
}

.forward-dialog__success {
  text-align: center;
  padding: var(--space-xl);
  color: var(--accent-success);
  font-weight: 500;
}

.forward-dialog__error {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 91, 85, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

/* ========== Thread Panel ========== */

.thread-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
}

.thread-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-md);
}

.thread-panel__messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.thread-panel__message {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.thread-panel__composer {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-md);
}

.thread-panel__composer textarea {
  flex: 1;
  min-height: 36px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  resize: none;
}

.thread-panel__composer textarea:focus {
  border-color: var(--border-focused);
}

.thread-summary__icon {
  font-size: var(--font-size-sm);
}

.thread-summary__text {
  color: var(--text-secondary);
}

/* ========== Member Info Panel ========== */

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

.member-info-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.member-info-panel__back-btn,
.member-info-panel__close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-info-panel__back-btn:hover,
.member-info-panel__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.member-info-panel__title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.member-info-panel__close-btn {
  margin-left: auto;
}

.member-info-panel__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl);
  text-align: center;
}

.member-info-panel__display-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-top: var(--space-md);
}

.member-info-panel__user-id {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  word-break: break-all;
}

.member-info-panel__section {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.member-info-panel__section-title {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.member-info-panel__role {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.member-info-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.member-info-panel__action-btn {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
}

.member-info-panel__action-btn:hover {
  background: var(--bg-hover);
}

.member-info-panel__action-btn--secondary {
  color: var(--text-secondary);
}

.member-info-panel__action-btn--warning {
  color: var(--accent-warning);
  border-color: var(--accent-warning);
}

.member-info-panel__action-btn--warning:hover {
  background: rgba(255, 197, 109, 0.1);
}

.member-info-panel__action-btn--danger {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

.member-info-panel__action-btn--danger:hover {
  background: rgba(255, 91, 85, 0.1);
}

.member-info-panel__error {
  padding: var(--space-sm) var(--space-md);
  margin: 0 var(--space-lg);
  background: rgba(255, 91, 85, 0.1);
  color: var(--accent-danger);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

/* ========== Member List Panel ========== */

.member-list-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.member-list-panel__back-btn,
.member-list-panel__close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-list-panel__back-btn:hover,
.member-list-panel__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.member-list-panel__title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.member-list-panel__count {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
}

.member-list-panel__close-btn {
  margin-left: auto;
}

.member-list-panel__search {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.member-list-panel__search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  font-size: var(--font-size-sm);
}

.member-list-panel__search-input:focus {
  border-color: var(--border-focused);
}

.member-list-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
}

.member-list-panel__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--text-disabled);
}

.member-list-panel__invite {
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--border-default);
}

.member-list-panel__invite-btn {
  width: 100%;
  padding: var(--space-sm);
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
}

.member-list-panel__invite-btn:hover {
  background: var(--accent-primary-hover);
}

.member-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: background 0.1s;
}

.member-list-item:hover {
  background: var(--bg-hover);
}

.member-list-item__info {
  flex: 1;
  min-width: 0;
}

.member-list-item__name {
  font-weight: 500;
  font-size: var(--font-size-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-list-item__user-id {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.member-list-item__role {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: 1px 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill);
}

/* ========== File Panel ========== */

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

.file-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.file-panel__back-btn,
.file-panel__close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-panel__back-btn:hover,
.file-panel__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.file-panel__title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.file-panel__close-btn {
  margin-left: auto;
}

.file-panel__tabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.file-panel__tab {
  padding: var(--space-xs) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.file-panel__tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.file-panel__tab--active {
  background: var(--bg-active);
  color: var(--text-primary);
}

.file-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
}

.file-panel__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--text-disabled);
  text-align: center;
}

.shared-file-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  transition: background 0.1s;
}

.shared-file-item:hover {
  background: var(--bg-hover);
}

.shared-file-item__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.shared-file-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shared-file-item__name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-file-item__meta {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.shared-file-item__download-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--accent-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shared-file-item__download-btn:hover {
  background: var(--bg-hover);
}

.shared-file-item__download-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== Pinned Messages Panel ========== */

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

.pinned-messages-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.pinned-messages-panel__back-btn,
.pinned-messages-panel__close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pinned-messages-panel__back-btn:hover,
.pinned-messages-panel__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pinned-messages-panel__title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.pinned-messages-panel__close-btn {
  margin-left: auto;
}

.pinned-messages-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
}

.pinned-messages-panel__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--text-disabled);
  text-align: center;
}

.pinned-message-item {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

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

.pinned-message-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.pinned-message-item__sender {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.pinned-message-item__pin-icon {
  font-size: var(--font-size-xs);
}

.pinned-message-item__body {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ========== Notification Panel ========== */

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

.notification-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.notification-panel__back-btn,
.notification-panel__close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-panel__back-btn:hover,
.notification-panel__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.notification-panel__title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.notification-panel__close-btn {
  margin-left: auto;
}

.notification-panel__description {
  padding: var(--space-sm) var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.notification-panel__options {
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.notification-option__radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.notification-option__radio-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--accent-primary);
}

.notification-option__text {
  flex: 1;
}

.notification-option__label {
  font-weight: 500;
  font-size: var(--font-size-md);
}

.notification-option__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ========== Room Info Panel (extended) ========== */

.room-info-panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.room-info-panel__close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-info-panel__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.room-info-panel__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.room-info-panel__room-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-top: var(--space-md);
}

.room-info-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-top: var(--space-sm);
}

.room-info-panel__badge--encrypted {
  background: rgba(13, 189, 139, 0.15);
  color: var(--accent-success);
}

.room-info-panel__badge--dm {
  background: rgba(108, 182, 255, 0.15);
  color: var(--text-link);
}

.room-info-panel__section {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.room-info-panel__section--danger {
  border-bottom: none;
  margin: var(--space-md) var(--space-lg);
  padding: var(--space-md);
  background: rgba(255, 91, 85, 0.05);
  border: 1px solid rgba(255, 91, 85, 0.2);
  border-radius: var(--radius-md);
}

.room-info-panel__section-title {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.room-info-panel__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-info-panel__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--font-size-sm);
}

.room-info-panel__nav-item:hover {
  background: var(--bg-hover);
}

.room-info-panel__nav-icon {
  font-size: var(--font-size-lg);
  width: 24px;
  text-align: center;
}

.room-info-panel__nav-label {
  flex: 1;
  font-weight: 500;
}

.room-info-panel__nav-detail {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.room-info-panel__leave-btn {
  width: 100%;
  padding: var(--space-sm);
  background: transparent;
  border: 1px solid var(--accent-danger);
  color: var(--accent-danger);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
}

.room-info-panel__leave-btn:hover {
  background: rgba(255, 91, 85, 0.1);
}

/* ========== Message Input Extensions ========== */

.message-input--editing {
  border-top: 2px solid var(--accent-primary);
}

.message-input__edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.message-input__edit-label {
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  font-weight: 500;
}

.message-input__edit-cancel {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-disabled);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.message-input__edit-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.message-input__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 91, 85, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.message-input__richtext-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-input__richtext-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.message-input__richtext-btn--active {
  color: var(--accent-primary);
  background: rgba(13, 189, 139, 0.1);
}

/* ========== Attachment Bar ========== */

.attachment-bar {
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.attachment-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.attachment-bar__count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.attachment-bar__clear-btn {
  border: none;
  background: transparent;
  color: var(--accent-danger);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
}

.attachment-bar__clear-btn:hover {
  background: rgba(255, 91, 85, 0.1);
}

.attachment-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.attachment-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.attachment-bar__item--uploading {
  opacity: 0.7;
  border-color: var(--accent-primary);
}

.attachment-bar__item-icon {
  font-size: var(--font-size-lg);
}

.attachment-bar__item-info {
  display: flex;
  flex-direction: column;
}

.attachment-bar__item-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-bar__item-size {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.attachment-bar__item-remove {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-disabled);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.attachment-bar__item-remove:hover {
  color: var(--accent-danger);
  background: rgba(255, 91, 85, 0.1);
}

.attachment-bar__item-spinner {
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  animation: spin 1s linear infinite;
}

/* ========== Rich Text Editor ========== */

.rich-text-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rich-text-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
}

.rich-text-editor__tool-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rich-text-editor__tool-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.rich-text-editor__tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rich-text-editor__tool-btn--active {
  background: var(--bg-active);
  color: var(--accent-primary);
}

.rich-text-editor__tool-icon {
  font-weight: 700;
}

.rich-text-editor__tool-icon--italic {
  font-style: italic;
}

.rich-text-editor__tool-icon--strike {
  text-decoration: line-through;
}

.rich-text-editor__toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 var(--space-xs);
}

.rich-text-editor__toolbar-spacer {
  flex: 1;
}

.rich-text-editor__input {
  flex: 1;
  min-height: 80px;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  color: var(--text-primary);
  outline: none;
  resize: none;
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.rich-text-editor__input::placeholder {
  color: var(--text-disabled);
}

.rich-text-editor__preview {
  padding: var(--space-md);
  min-height: 80px;
  overflow-y: auto;
  line-height: 1.5;
}

.rich-text-editor__preview p { margin: 0 0 var(--space-sm) 0; }
.rich-text-editor__preview code {
  padding: 1px 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: monospace;
}
.rich-text-editor__preview pre {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.rich-text-editor__preview blockquote {
  border-left: 3px solid var(--border-default);
  padding-left: var(--space-md);
  color: var(--text-secondary);
}

/* ========== Reply Bar (extended) ========== */

.reply-bar__indicator {
  width: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  align-self: stretch;
}

.reply-bar__sender {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
}

.reply-bar__body {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Modal Dialog (used by room-settings, invite, create-room, etc.) ========== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.modal-dialog {
  position: relative;
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-default);
}

.modal-dialog__header h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.modal-dialog__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
}

.modal-dialog__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-dialog__body {
  flex: 1;
  padding: var(--space-xl);
  overflow-y: auto;
}

.modal-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-top: 1px solid var(--border-default);
}

/* ========== Create Room / Join Room / Invite Dialogs ========== */

.create-room-dialog,
.join-room-dialog,
.invite-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.create-room-dialog__field,
.join-room-dialog__field,
.invite-dialog__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.create-room-dialog__field label,
.join-room-dialog__field label,
.invite-dialog__field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.create-room-dialog__field input,
.create-room-dialog__field textarea,
.join-room-dialog__field input,
.invite-dialog__field input {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
}

.create-room-dialog__field input:focus,
.create-room-dialog__field textarea:focus,
.join-room-dialog__field input:focus,
.invite-dialog__field input:focus {
  border-color: var(--border-focused);
}

.create-room-dialog__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.create-room-dialog__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.create-room-dialog__checkbox input[type="checkbox"] {
  accent-color: var(--accent-primary);
  width: 18px;
  height: 18px;
}

.create-room-dialog__error,
.join-room-dialog__error,
.invite-dialog__error {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 91, 85, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

.join-room-dialog__hint {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.invite-dialog__success {
  color: var(--accent-success);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* ========== Room Settings Dialog ========== */

.room-settings-dialog {
  display: flex;
  flex-direction: column;
}

.room-settings-dialog__content {
  padding: var(--space-lg);
}

.room-settings-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.room-settings-tab__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.room-settings-tab__field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.room-settings-tab__field input,
.room-settings-tab__field textarea,
.room-settings-tab__field select {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
}

.room-settings-tab__value {
  font-family: monospace;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.room-settings-tab__code {
  font-family: monospace;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  word-break: break-all;
}

.room-settings-tab__hint {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.room-settings-tab__actions {
  display: flex;
  gap: var(--space-sm);
}

.room-settings-tab__success {
  color: var(--accent-success);
  font-size: var(--font-size-sm);
}

.room-settings-tab__error {
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

.room-settings-tab__danger {
  padding: var(--space-md);
  background: rgba(255, 91, 85, 0.05);
  border: 1px solid rgba(255, 91, 85, 0.2);
  border-radius: var(--radius-md);
}

.room-settings-tab__member-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-settings-tab__member-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.room-settings-tab__member-row:hover {
  background: var(--bg-hover);
}

.room-settings-tab__member-name {
  font-weight: 500;
}

.room-settings-tab__member-id {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.btn--small {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
}

/* ========== Space Dialogs ========== */

.create-space-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.create-space-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.space-settings-dialog {
  display: flex;
  flex-direction: column;
}

.space-settings__general,
.space-settings__rooms,
.space-settings__advanced {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md);
}

/* ========== Space Home ========== */

.space-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.space-home__header {
  padding: var(--space-xxl) 40px;
  border-bottom: 1px solid var(--border-default);
  text-align: center;
}

.space-home__content {
  padding: var(--space-xl) 40px;
  flex: 1;
}

.space-home__room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.space-home__room-card {
  padding: var(--space-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.space-home__room-card:hover {
  background: var(--bg-hover);
  border-color: var(--text-disabled);
}

/* ========== Settings Extensions ========== */

.appearance-settings,
.general-settings,
.notification-settings,
.security-settings,
.session-settings {
  max-width: 640px;
}

.settings-input {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  font-size: var(--font-size-sm);
}

.settings-input:focus {
  border-color: var(--border-focused);
}

.settings-toggle__info {
  flex: 1;
}

.settings-section__action-btn {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
}

.settings-section__action-btn:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}

.settings-section__action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.security-status__info {
  flex: 1;
}

.session-card--current {
  border: 1px solid var(--accent-primary);
  background: rgba(13, 189, 139, 0.05);
}

.keyword-input-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
}

.keyword-tag__remove {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--text-disabled);
  cursor: pointer;
  border-radius: var(--radius-circle);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyword-tag__remove:hover {
  color: var(--accent-danger);
  background: rgba(255, 91, 85, 0.1);
}

.font-size-selector {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.layout-selector {
  display: flex;
  gap: var(--space-md);
}

.layout-selector__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: transparent;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color 0.15s;
}

.layout-selector__option:hover {
  border-color: var(--text-disabled);
}

.settings-field__avatar-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.settings-field__avatar-preview {
  flex-shrink: 0;
}

/* ========== Message Content Extensions ========== */

.message-content--audio {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  max-width: 320px;
}

.message-content__audio-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.message-content__audio-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.message-content__audio-duration {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.message-content--video {
  max-width: 400px;
}

.message-content__video-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.message-content__video-thumb img {
  width: 100%;
  display: block;
}

.message-content__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  font-size: 48px;
}

.message-content__video-name {
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.message-content--state {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  font-style: italic;
  text-align: center;
}

.message-content__blurhash {
  width: 100%;
  border-radius: var(--radius-md);
}

.message-content__caption {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.message-content__error-icon {
  font-size: var(--font-size-lg);
}

.message-content__redact-reason {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.message-content__sticker-img {
  max-width: 160px;
  max-height: 160px;
}

/* ========== File Download Component ========== */

.file-download {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  max-width: 360px;
}

.file-download__icon {
  font-size: 28px;
  flex-shrink: 0;
}

.file-download__info {
  flex: 1;
  min-width: 0;
}

.file-download__name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-download__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.file-download__size {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.file-download__mime {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.file-download__action {
  flex-shrink: 0;
}

.file-download__btn {
  padding: var(--space-xs) var(--space-md);
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.file-download__btn:hover {
  background: var(--accent-primary-hover);
}

.file-download__btn--retry {
  background: var(--accent-warning);
}

.file-download__progress-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.file-download__done {
  color: var(--accent-success);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.file-download__error {
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

/* ========== Image Viewer (extended) ========== */

.image-viewer__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.image-viewer__content {
  position: relative;
  z-index: 1;
  max-width: 90%;
  max-height: 90%;
}

.image-viewer__toolbar {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  z-index: 2;
}

.image-viewer__close-btn,
.image-viewer__action-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: var(--radius-circle);
  cursor: pointer;
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.image-viewer__close-btn:hover,
.image-viewer__action-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.image-viewer__title {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: var(--font-size-sm);
  background: rgba(0, 0, 0, 0.6);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
}

.image-viewer__actions {
  display: flex;
  gap: var(--space-sm);
}

/* ========== Upload Bar (extended) ========== */

.upload-bar__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upload-bar__file-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-bar__size-text {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.upload-bar__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.upload-bar__percentage {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.upload-bar__cancel-btn {
  border: none;
  background: transparent;
  color: var(--accent-danger);
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 2px var(--space-sm);
}

.upload-bar__track {
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-xs);
}

.upload-bar__fill {
  height: 100%;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}

/* ========== Timeline Extensions ========== */

.timeline-panel__load-more {
  display: flex;
  justify-content: center;
  padding: var(--space-md);
}

.timeline-panel__load-more-btn {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.timeline-panel__load-more-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.timeline-panel__loading-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.timeline-panel__no-results {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--text-disabled);
  font-style: italic;
}

.timeline-panel__empty-hint {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  margin-top: var(--space-sm);
}

.typing-indicator__text {
  font-style: italic;
}

.state-event {
  display: flex;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
}

.state-event__text {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  font-style: italic;
}

/* ========== Room List Header Extensions ========== */

.room-list-header__action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-list-header__action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.room-list-header__search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ========== Spaces Bar Extensions ========== */

.spaces-bar__home-icon,
.spaces-bar__dm-icon,
.spaces-bar__fav-icon {
  font-size: 18px;
}

/* ========== Room Search Bar ========== */

.room-screen__search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.room-screen__search-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  font-size: var(--font-size-sm);
}

.room-screen__search-input:focus {
  border-color: var(--border-focused);
}

/* ========== Misc Components ========== */

.emoji-picker__section {
  margin-bottom: var(--space-sm);
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-default);
  padding: 0 var(--space-md);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__trigger {
  cursor: pointer;
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: var(--space-xs);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip-wrapper {
  position: relative;
  display: inline-flex;
}

.btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.toast__icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.toast__message {
  flex: 1;
  font-size: var(--font-size-sm);
}

/* ========== Auth Page Wrappers ========== */

.login-page,
.register-page,
.forgot-password-page,
.settings-page {
  width: 100%;
}

.login-page__forgot {
  text-align: right;
  font-size: var(--font-size-sm);
}

.auth-layout__content {
  width: 100%;
}

/* ========== SSO Login ========== */

.sso-login {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.sso-login-button {
  width: 100%;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
}

.sso-login-button:hover {
  background: var(--bg-hover);
  border-color: var(--text-disabled);
}

.sso-login__error {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 91, 85, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
  width: 100%;
  text-align: center;
}

.password-reset-form__description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.password-reset__success {
  color: var(--accent-success);
  text-align: center;
  font-weight: 500;
}

/* ==========================================================================
   Phase 10 - High Priority Missing Features CSS
   ========================================================================== */

/* ---------- Image Viewer (enhanced) ---------- */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}
.image-viewer__backdrop {
  position: absolute;
  inset: 0;
}
.image-viewer__toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10001;
}
.image-viewer__title {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
.image-viewer__actions {
  display: flex;
  gap: 8px;
}
.image-viewer__action-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.image-viewer__action-btn:hover {
  background: rgba(255,255,255,0.2);
}
.image-viewer__close-btn {
  font-weight: bold;
}
.image-viewer__content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 85vh;
  margin-top: 56px;
}
.image-viewer__img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: zoom-in;
  transition: transform 0.2s;
}
.image-viewer__img--zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

/* ---------- Jump to Bottom Button ---------- */
.timeline-panel__jump-bottom-wrapper {
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}
.timeline-panel__jump-bottom {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-color, #333);
  border-radius: 20px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: background 0.15s, transform 0.15s;
}
.timeline-panel__jump-bottom:hover {
  background: var(--bg-tertiary, #252540);
  transform: translateY(-2px);
}
.timeline-panel__jump-badge {
  background: var(--accent-primary, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* ---------- Context Menu ---------- */
.context-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
}
.context-menu {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 5001;
}
.context-menu__item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: background 0.1s;
}
.context-menu__item:hover {
  background: var(--bg-tertiary, #252540);
}
.context-menu__item--danger {
  color: var(--error-text, #f44336);
}
.context-menu__item--danger:hover {
  background: rgba(244, 67, 54, 0.1);
}
.context-menu__separator {
  height: 1px;
  background: var(--border-color, #333);
  margin: 4px 8px;
}

/* ---------- Event Source Modal ---------- */
.event-source {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.event-source__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.event-source__event-id {
  font-size: 12px;
  color: var(--text-secondary, #888);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-source__content {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 12px;
  max-height: 60vh;
  overflow: auto;
  padding: 16px;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  color: var(--text-primary, #e0e0e0);
  line-height: 1.5;
}

/* ---------- Invite Preview Bar ---------- */
.invite-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 32px;
  flex: 1;
  text-align: center;
}
.invite-preview__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.invite-preview__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.invite-preview__room-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}
.invite-preview__inviter {
  font-size: 14px;
  color: var(--text-secondary, #888);
  margin: 0;
}
.invite-preview__error {
  padding: 8px 16px;
  background: rgba(244, 67, 54, 0.1);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  font-size: 13px;
}
.invite-preview__actions {
  display: flex;
  gap: 12px;
}

/* ---------- Room Directory ---------- */
.room-directory {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.room-directory__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 16px 0;
}
.room-directory__header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary, #e0e0e0);
}
.room-directory__close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.room-directory__search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.room-directory__search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-primary, #0d0d1a);
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.room-directory__error {
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(244, 67, 54, 0.1);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  font-size: 13px;
}
.room-directory__list {
  overflow-y: auto;
  flex: 1;
}
.room-directory__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-secondary, #888);
}
.room-directory__empty {
  text-align: center;
  padding: 32px;
  color: var(--text-secondary, #888);
}
.room-directory__entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.1s;
}
.room-directory__entry:hover {
  background: var(--bg-tertiary, #252540);
}
.room-directory__entry-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.room-directory__entry-name {
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.room-directory__entry-alias {
  font-size: 12px;
  color: var(--accent-primary, #6366f1);
}
.room-directory__entry-topic {
  font-size: 12px;
  color: var(--text-secondary, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-directory__entry-members {
  font-size: 11px;
  color: var(--text-tertiary, #666);
}

/* ---------- Code Block Syntax Highlighting ---------- */
.code-block {
  margin: 6px 0;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-primary, #0d0d1a);
}
.code-block__header {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-tertiary, #252540);
  border-bottom: 1px solid var(--border-color, #333);
}
.code-block__language {
  font-size: 11px;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.code-block__pre {
  margin: 0;
  padding: 12px 16px;
  overflow-x: auto;
}
.code-block__code {
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #e0e0e0);
  white-space: pre;
  tab-size: 4;
}

/* Basic syntax highlighting colors via language classes */
.code-block__code .keyword { color: #c678dd; }
.code-block__code .string { color: #98c379; }
.code-block__code .comment { color: #5c6370; font-style: italic; }
.code-block__code .number { color: #d19a66; }
.code-block__code .function { color: #61afef; }

/* ---------- Link Preview Card ---------- */
.link-preview-card {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  background: var(--bg-tertiary, #252540);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
  max-width: 400px;
  overflow: hidden;
}
.link-preview-card:hover {
  background: var(--bg-secondary, #1a1a2e);
}
.link-preview-card__image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.link-preview-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.link-preview-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-preview-card__description {
  font-size: 12px;
  color: var(--text-secondary, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-preview-card__domain {
  font-size: 11px;
  color: var(--accent-primary, #6366f1);
}

/* ---------- Logout Confirmation ---------- */
.logout-confirm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.logout-confirm__message {
  font-size: 14px;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
  line-height: 1.5;
}
.logout-confirm__warning {
  font-size: 13px;
  color: var(--warning-text, #ff9800);
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 152, 0, 0.1);
  border-radius: 6px;
  line-height: 1.5;
}
.logout-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ---------- Room Search Bar ---------- */
.room-screen__search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-secondary, #1a1a2e);
  border-bottom: 1px solid var(--border-color, #333);
}
.room-screen__search-icon {
  color: var(--text-secondary, #888);
  font-size: 14px;
}
.room-screen__search-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-primary, #0d0d1a);
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.room-screen__search-input:focus {
  border-color: var(--accent-primary, #6366f1);
  outline: none;
}
.room-screen__search-count {
  font-size: 12px;
  color: var(--text-secondary, #888);
}
.room-screen__search-close {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: 16px;
}
.room-screen__search-close:hover {
  color: var(--text-primary, #e0e0e0);
}

/* ==========================================================================
   Phase 11 - Remaining Features CSS
   ========================================================================== */

/* ---------- Tombstoned Room Bar (#45) ---------- */
.room-screen__tombstone-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(255, 152, 0, 0.1);
  border-bottom: 1px solid rgba(255, 152, 0, 0.3);
}
.room-screen__tombstone-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.room-screen__tombstone-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.room-screen__tombstone-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary, #e0e0e0);
}

/* ---------- Room Loading Indicator (#61) ---------- */
.room-screen__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  flex: 1;
  color: var(--text-secondary, #888);
}

/* ---------- Knocked Room Bar (#55) ---------- */
.room-screen__knock-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  text-align: center;
  justify-content: center;
  background: var(--bg-secondary, #1a1a2e);
  border-bottom: 1px solid var(--border-color, #333);
}
.room-screen__knock-icon {
  font-size: 32px;
}
.room-screen__knock-info p {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: var(--text-primary, #e0e0e0);
}
.room-screen__knock-hint {
  font-size: 13px;
  color: var(--text-secondary, #888);
}

/* ---------- Edit History Modal (#46) ---------- */
.edit-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edit-history__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-secondary, #888);
}
.edit-history__error {
  padding: 8px 12px;
  background: rgba(244, 67, 54, 0.1);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  font-size: 13px;
}
.edit-history__revision {
  padding: 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  background: var(--bg-tertiary, #252540);
}
.edit-history__revision--current {
  border-color: var(--accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.05);
}
.edit-history__revision-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.edit-history__revision-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-secondary, #888);
}
.edit-history__revision-time {
  font-size: 12px;
  color: var(--text-secondary, #888);
}
.edit-history__revision-sender {
  font-size: 12px;
  color: var(--text-secondary, #888);
}
.edit-history__revision-body {
  font-size: 14px;
  color: var(--text-primary, #e0e0e0);
  white-space: pre-wrap;
}
.edit-history__empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary, #888);
}

/* ---------- Room List Section Headers (#49) ---------- */
.room-list-panel__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 6px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #888);
}
.room-list-panel__section-count {
  font-size: 10px;
  background: var(--bg-tertiary, #252540);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--text-secondary, #888);
}

/* ---------- Presence Dot (#47) ---------- */
.room-list-entry__avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}
.room-list-entry__presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary, #1a1a2e);
}
.room-list-entry__presence-dot--online {
  background: #0dbd8b;
}
.room-list-entry__presence-dot--unavailable {
  background: #ff9800;
}
.room-list-entry__presence-dot--offline {
  background: #666;
}

/* ---------- Poll Display (#50) ---------- */
.message-content--poll {
  max-width: 400px;
}
.poll-display__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.poll-display__icon {
  font-size: 20px;
}
.poll-display__question {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #e0e0e0);
}
.poll-display__ended-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg-tertiary, #252540);
  border-radius: 4px;
  color: var(--text-secondary, #888);
}
.poll-display__answers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-display__answer {
  position: relative;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.poll-display__answer--voted {
  border-color: var(--accent-primary, #6366f1);
}
.poll-display__answer-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(99, 102, 241, 0.15);
  transition: width 0.3s ease;
}
.poll-display__answer-text {
  position: relative;
  z-index: 1;
  font-size: 14px;
}
.poll-display__answer-count {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #888);
}
.poll-display__footer {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary, #888);
}

/* ---------- Location Display (#52) ---------- */
.message-content--location {
  max-width: 360px;
}
.location-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  background: var(--bg-tertiary, #252540);
}
.location-display__icon {
  font-size: 28px;
  flex-shrink: 0;
}
.location-display__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.location-display__desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}
.location-display__coords {
  font-size: 12px;
  color: var(--text-secondary, #888);
  font-family: monospace;
}

/* ---------- Voice Message Display (#51) ---------- */
.message-content--voice {
  max-width: 320px;
}
.voice-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #333);
  border-radius: 24px;
  background: var(--bg-tertiary, #252540);
}
.voice-display__play-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--accent-primary, #6366f1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.voice-display__waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 32px;
}
.voice-display__bar {
  width: 3px;
  background: var(--accent-primary, #6366f1);
  border-radius: 2px;
  min-height: 3px;
  opacity: 0.6;
}
.voice-display__duration {
  font-size: 12px;
  color: var(--text-secondary, #888);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---------- Voice Recorder (#51) ---------- */
.voice-recorder {
  display: flex;
  align-items: center;
}
.voice-recorder__recording {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 20px;
}
.voice-recorder__dot {
  width: 10px;
  height: 10px;
  background: #f44336;
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.voice-recorder__time {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #e0e0e0);
}
.voice-recorder__stop-btn,
.voice-recorder__cancel-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.voice-recorder__stop-btn:hover {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}
.voice-recorder__start-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  font-size: 18px;
}
.voice-recorder__start-btn:hover {
  background: var(--bg-hover, #252540);
  color: var(--text-primary, #e0e0e0);
}

/* ---------- Sticker Picker (#58) ---------- */
.sticker-picker {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 320px;
  max-height: 360px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
}
.sticker-picker__tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--border-color, #333);
  overflow-x: auto;
}
.sticker-picker__tab {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.sticker-picker__tab:hover {
  background: var(--bg-tertiary, #252540);
}
.sticker-picker__tab--active {
  background: var(--bg-tertiary, #252540);
  color: var(--accent-primary, #6366f1);
  font-weight: 600;
}
.sticker-picker__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}
.sticker-picker__sticker {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.1s;
}
.sticker-picker__sticker:hover {
  background: var(--bg-tertiary, #252540);
  transform: scale(1.15);
}
.sticker-picker__footer {
  padding: 6px;
  border-top: 1px solid var(--border-color, #333);
  display: flex;
  justify-content: flex-end;
}

/* ---------- Poll Creator (#50) ---------- */
.poll-creator {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.poll-creator__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-creator__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #888);
}
.poll-creator__question-input,
.poll-creator__answer-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.poll-creator__answer-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.poll-creator__answer-input {
  flex: 1;
}
.poll-creator__remove-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  border-radius: 4px;
}
.poll-creator__remove-btn:hover {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}
.poll-creator__error {
  padding: 8px 12px;
  background: rgba(244, 67, 54, 0.1);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  font-size: 13px;
}
.poll-creator__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Location Picker (#52) ---------- */
.location-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.location-picker__hint {
  font-size: 13px;
  color: var(--text-secondary, #888);
  margin: 0;
}
.location-picker__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.location-picker__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #888);
}
.location-picker__field input {
  padding: 8px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.location-picker__error {
  color: var(--error-text, #f44336);
  font-size: 13px;
}
.location-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Chat Export (#62) ---------- */
.chat-export {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-export__info {
  font-size: 14px;
  color: var(--text-secondary, #888);
  margin: 0;
}
.chat-export__format {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-export__format label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #888);
}
.chat-export__format-options {
  display: flex;
  gap: 8px;
}
.chat-export__format-btn {
  padding: 8px 14px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.1s;
}
.chat-export__format-btn:hover {
  background: var(--bg-tertiary, #252540);
}
.chat-export__format-btn--active {
  border-color: var(--accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent-primary, #6366f1);
}
.chat-export__status {
  font-size: 13px;
  color: var(--accent-primary, #6366f1);
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 6px;
}
.chat-export__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Server Search (#53) ---------- */
.server-search {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.server-search__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #333);
}
.server-search__header h3 {
  margin: 0;
  font-size: 16px;
}
.server-search__close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: 18px;
}
.server-search__input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}
.server-search__input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.server-search__results {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}
.server-search__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  justify-content: center;
  color: var(--text-secondary, #888);
}
.server-search__empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary, #888);
}
.server-search__result {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color, #333);
}
.server-search__result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.server-search__result-sender {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #e0e0e0);
}
.server-search__result-time {
  font-size: 11px;
  color: var(--text-secondary, #888);
}
.server-search__result-body {
  font-size: 13px;
  color: var(--text-secondary, #888);
}

/* ---------- Jump to Date (#54) ---------- */
.jump-to-date {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
}
.jump-to-date__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jump-to-date__header h4 {
  margin: 0;
  font-size: 14px;
}
.jump-to-date__close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
}
.jump-to-date__picker {
  display: flex;
  gap: 8px;
  align-items: center;
}
.jump-to-date__input {
  padding: 6px 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.jump-to-date__quick-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.jump-to-date__quick-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: 12px;
}
.jump-to-date__quick-btn:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
}
.jump-to-date__error {
  color: var(--error-text, #f44336);
  font-size: 13px;
}

/* ---------- Session Card Extensions (#57) ---------- */
.session-card--selected {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid var(--accent-primary, #6366f1);
}
.session-card__badge--unverified {
  background: rgba(255, 152, 0, 0.15);
  color: #ff9800;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}
.session-card__badge--verified {
  background: rgba(13, 189, 139, 0.15);
  color: #0dbd8b;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---------- Composer Action Buttons (#50, #51, #52, #58) ---------- */
.message-input__action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  color: var(--text-secondary, #888);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.message-input__action-btn:hover {
  background: var(--bg-hover, #252540);
  color: var(--text-primary, #e0e0e0);
}

/* ---------- 3PID List (#59) ---------- */
.threepid-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.threepid-item__medium {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-secondary, #888);
  padding: 2px 6px;
  background: var(--bg-tertiary, #252540);
  border-radius: 4px;
}

/* ==========================================================================
   Round 4 - Additional Element Web features
   ========================================================================== */

/* ---------- Spotlight Search ---------- */
.spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.spotlight-dialog {
  width: 600px;
  max-width: 90vw;
  background: var(--bg-secondary, #1c2026);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.spotlight-dialog__input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-default, #333);
}
.spotlight-dialog__search-icon { font-size: 18px; }
.spotlight-dialog__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary, #fff);
  font-size: 16px;
}
.spotlight-dialog__shortcut {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-tertiary, #333);
  color: var(--text-secondary, #888);
}
.spotlight-dialog__results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}
.spotlight-dialog__section-header {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-secondary, #888);
  padding: 8px 12px 4px;
  letter-spacing: 0.5px;
}
.spotlight-dialog__empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary, #888);
}
.spotlight-dialog__result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  color: var(--text-primary, #fff);
  text-align: left;
}
.spotlight-dialog__result:hover,
.spotlight-dialog__result--selected {
  background: var(--bg-hover, #282e36);
}
.spotlight-dialog__result-icon { font-size: 16px; width: 24px; text-align: center; }
.spotlight-dialog__result-name { flex: 1; font-size: 14px; }
.spotlight-dialog__footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-secondary, #888);
  border-top: 1px solid var(--border-default, #333);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--bg-primary, #15191e);
  border-bottom: 1px solid var(--border-default, #333);
  min-height: 36px;
  overflow-x: auto;
}
.breadcrumbs:empty { display: none; }
.breadcrumbs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle, 50%);
  background: var(--bg-tertiary, #333);
  color: var(--text-primary, #fff);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}
.breadcrumbs__item:hover {
  background: var(--accent-primary, #0dbd8b);
  color: white;
}

/* ---------- Keyboard Shortcuts ---------- */
.keyboard-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}
.keyboard-shortcuts__section-title {
  font-size: 13px;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.keyboard-shortcuts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.keyboard-shortcuts__keys {
  display: inline-block;
  padding: 3px 8px;
  background: var(--bg-tertiary, #333);
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-default, #444);
}
.keyboard-shortcuts__desc {
  font-size: 13px;
  color: var(--text-primary, #ddd);
}

/* ---------- Labs Settings ---------- */
.labs-settings__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.labs-settings__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-tertiary, #252540);
  border-radius: var(--radius-md, 8px);
}
.labs-settings__info { flex: 1; }
.labs-settings__name {
  display: block;
  font-size: 14px;
  color: var(--text-primary, #fff);
}
.labs-settings__description {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-top: 2px;
}
.labs-settings__toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.labs-settings__toggle--on {
  background: var(--accent-primary, #0dbd8b);
}
.labs-settings__toggle--off {
  background: var(--bg-active, #444);
}

/* ---------- Key Export Dialog ---------- */
.key-export { display: flex; flex-direction: column; gap: 16px; }
.key-export__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-default, #333);
  padding-bottom: 8px;
}
.key-export__tab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  border-radius: var(--radius-md, 8px);
}
.key-export__tab--active {
  background: var(--accent-primary, #0dbd8b);
  color: white;
}
.key-export__section { display: flex; flex-direction: column; gap: 12px; }
.key-export__info { color: var(--text-secondary, #888); font-size: 13px; line-height: 1.4; }
.key-export__field { display: flex; flex-direction: column; gap: 4px; }
.key-export__field label { font-size: 13px; color: var(--text-secondary, #888); }
.key-export__field input {
  padding: 8px 12px;
  background: var(--bg-tertiary, #333);
  border: 1px solid var(--border-default, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #fff);
}
.key-export__status {
  padding: 8px 12px;
  background: var(--bg-tertiary, #333);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #fff);
  font-size: 13px;
}

/* ---------- Report Dialog ---------- */
.report-dialog { display: flex; flex-direction: column; gap: 12px; }
.report-dialog__info { color: var(--text-secondary, #888); font-size: 13px; }
.report-dialog textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 12px;
  background: var(--bg-tertiary, #333);
  border: 1px solid var(--border-default, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #fff);
  resize: vertical;
}
.report-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; }
.report-dialog__status--ok { color: var(--accent-success, #0dbd8b); }
.report-dialog__status--err { color: var(--accent-danger, #ff5b55); }

/* ---------- Share Room Dialog ---------- */
.share-dialog { display: flex; flex-direction: column; gap: 12px; }
.share-dialog__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary, #333);
  border-radius: var(--radius-md, 6px);
}
.share-dialog__link code {
  flex: 1;
  word-break: break-all;
  color: var(--text-primary, #fff);
  font-size: 13px;
}

/* ---------- Space Hierarchy ---------- */
.space-hierarchy { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.space-hierarchy__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  justify-content: center;
}
.space-hierarchy__empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary, #888);
}
.space-hierarchy__error { color: var(--accent-danger, #ff5b55); padding: 8px; }
.space-hierarchy__list { display: flex; flex-direction: column; gap: 4px; }
.space-hierarchy__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--bg-tertiary, #252540);
}
.space-hierarchy__item--joined { background: var(--bg-hover, #282e36); }
.space-hierarchy__item-icon { font-size: 18px; width: 28px; text-align: center; }
.space-hierarchy__item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.space-hierarchy__item-name { font-size: 14px; color: var(--text-primary, #fff); }
.space-hierarchy__item-topic {
  font-size: 12px;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.space-hierarchy__item-members { font-size: 11px; color: var(--text-disabled, #666); }

/* ---------- Spoiler Text ---------- */
.spoiler {
  background: var(--text-primary, #fff);
  color: transparent;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 4px;
  transition: color 0.3s, background 0.3s;
  user-select: none;
}
.spoiler:hover,
.spoiler.revealed {
  background: var(--bg-tertiary, #333);
  color: var(--text-primary, #fff);
}

/* ---------- Inline Video Player ---------- */
.message-content__video-player {
  max-width: 100%;
  border-radius: var(--radius-md, 8px);
  background: #000;
}

/* ---------- Inline Audio Player ---------- */
.message-content__audio-player {
  width: 100%;
  max-width: 400px;
  height: 36px;
}

/* ---------- High Contrast Theme ---------- */
[data-theme="high-contrast"] {
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2d2d2d;
  --bg-canvas: #000000;
  --bg-hover: #3a3a3a;
  --bg-active: #444444;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-disabled: #808080;
  --text-link: #58a6ff;
  --accent-primary: #00ff88;
  --accent-primary-hover: #00dd77;
  --accent-danger: #ff4444;
  --accent-danger-hover: #dd3333;
  --accent-success: #00ff88;
  --accent-warning: #ffff00;
  --border-default: #ffffff;
  --border-focused: #58a6ff;
}
[data-theme="high-contrast"] * {
  font-weight: 500;
}

/* ---------- Devtools Page ---------- */
.devtools { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.devtools__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-default, #333);
  padding-bottom: 8px;
}
.devtools__tab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  border-radius: var(--radius-md, 8px);
}
.devtools__tab--active { background: var(--accent-primary, #0dbd8b); color: white; }
.devtools__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.devtools__field { display: flex; flex-direction: column; gap: 4px; }
.devtools__field label { font-size: 12px; color: var(--text-secondary, #888); }
.devtools__field code,
.devtools__field pre {
  padding: 6px 10px;
  background: var(--bg-tertiary, #333);
  border-radius: var(--radius-sm, 4px);
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
}

/* ---------- Spaces Bar Explore ---------- */
.spaces-bar__explore {
  font-size: 14px !important;
}

/* ---------- Room Aliases Tab ---------- */
.room-settings-tab__alias-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-default, #333);
  font-family: monospace;
  font-size: 13px;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--accent-primary, #0dbd8b);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== VoIP Call UI ===== */
.call-buttons {
  display: flex;
  gap: 2px;
}
.call-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
}
.call-view--video {
  background: #111;
}
.call-view__header {
  text-align: center;
  padding: 16px;
}
.call-view__room-name {
  font-size: 1.4em;
  margin: 0 0 4px;
}
.call-view__status {
  color: #aaa;
  font-size: 0.95em;
}
.call-view__video-area {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-view__remote-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-view__local-video {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 180px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #444;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 0.85em;
}
.call-view__voice-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.call-view__connecting-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-view__video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.call-view__participants {
  padding: 12px 24px;
  width: 100%;
  max-width: 600px;
}
.call-view__participant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.call-view__participant--speaking {
  background: rgba(76, 175, 80, 0.15);
  border-radius: 6px;
  padding: 6px 8px;
}
.call-view__participant-name {
  flex: 1;
}
.call-view__participant-muted {
  opacity: 0.6;
}
.call-view__controls {
  display: flex;
  gap: 12px;
  padding: 24px;
}
.call-view__btn {
  padding: 12px 20px;
  border-radius: 50px;
  border: none;
  font-size: 1.1em;
  cursor: pointer;
  background: #333;
  color: #fff;
  transition: background 0.15s;
}
.call-view__btn:hover {
  background: #444;
}
.call-view__btn--active {
  background: #e53935;
  color: #fff;
}
.call-view__btn--hangup {
  background: #e53935;
  color: #fff;
  padding: 12px 32px;
}
.call-view__btn--hangup:hover {
  background: #c62828;
}
.call-view__btn--accept {
  background: #4caf50;
  color: #fff;
}
.call-view__btn--decline {
  background: #e53935;
  color: #fff;
}

/* ===== Screen Share Indicator ===== */
.screen-share-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-bg, #1a3a5c);
  border-radius: 6px;
  color: var(--accent-color, #4a9eff);
  font-size: 0.9em;
  margin: 4px 0;
}

/* ===== Presence Indicator ===== */
.presence-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, #1a1a2e);
  flex-shrink: 0;
}
.presence-indicator--online {
  background: #4caf50;
}
.presence-indicator--unavailable {
  background: #ff9800;
}
.presence-indicator--offline {
  background: #666;
}

/* ===== URL Preview Card ===== */
.url-preview {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  margin-top: 6px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-secondary, #16213e);
  max-width: 400px;
  transition: background 0.15s;
}
.url-preview:hover {
  background: var(--bg-hover, #1a2744);
}
.url-preview__image {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.url-preview__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.url-preview__site {
  font-size: 0.75em;
  color: var(--text-muted, #888);
  text-transform: uppercase;
}
.url-preview__title {
  font-size: 0.9em;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.url-preview__description {
  font-size: 0.8em;
  color: var(--text-secondary, #aaa);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Drag & Drop Upload ===== */
.drag-drop-zone {
  position: relative;
}
.drag-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(74, 158, 255, 0.15);
  border: 3px dashed var(--accent-color, #4a9eff);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.drag-drop-overlay__content {
  text-align: center;
  color: var(--accent-color, #4a9eff);
}
.drag-drop-overlay__icon {
  font-size: 3em;
  margin-bottom: 8px;
}
.drag-drop-overlay__text {
  font-size: 1.2em;
  font-weight: 500;
}

/* ===== User Directory Search ===== */
.user-directory {
  min-height: 300px;
}
.user-directory__search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.user-directory__search-bar input {
  flex: 1;
}
.user-directory__loading {
  text-align: center;
  padding: 24px;
}
.user-directory__empty {
  text-align: center;
  color: var(--text-muted, #888);
  padding: 24px;
}
.user-directory__results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-directory__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.user-directory__result:hover {
  background: var(--bg-hover, #1a2744);
}
.user-directory__result-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.user-directory__result-name {
  font-weight: 500;
}
.user-directory__result-id {
  font-size: 0.85em;
  color: var(--text-muted, #888);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Message Effects ===== */
.message-effects {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  pointer-events: none;
  overflow: hidden;
}
.message-effects__particle {
  position: absolute;
  top: -30px;
  animation: effect-fall 3s ease-in forwards;
}
@keyframes effect-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.message-effects--fireworks .message-effects__particle {
  top: 50%;
  animation: effect-burst 2s ease-out forwards;
}
@keyframes effect-burst {
  0% { transform: scale(0) translateY(0); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: scale(1.5) translateY(-200px); opacity: 0; }
}
.message-effects--snow .message-effects__particle {
  animation: effect-snow 4s linear forwards;
}
@keyframes effect-snow {
  0% { transform: translateY(0) translateX(0); opacity: 1; }
  100% { transform: translateY(100vh) translateX(50px); opacity: 0; }
}
.message-effects--rainbow {
  background: linear-gradient(
    45deg,
    rgba(255,0,0,0.1),
    rgba(255,127,0,0.1),
    rgba(255,255,0,0.1),
    rgba(0,255,0,0.1),
    rgba(0,0,255,0.1),
    rgba(139,0,255,0.1)
  );
  animation: rainbow-fade 3s ease-in-out forwards;
}
@keyframes rainbow-fade {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Room Preview ===== */
.room-preview {
  min-height: 200px;
}
.room-preview__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 40px;
}
.room-preview__header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}
.room-preview__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.room-preview__name {
  margin: 0;
  font-size: 1.2em;
}
.room-preview__topic {
  font-size: 0.9em;
  color: var(--text-secondary, #aaa);
}
.room-preview__members {
  font-size: 0.85em;
  color: var(--text-muted, #888);
}
.room-preview__error {
  padding: 8px 12px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  margin: 8px 0;
}
.room-preview__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ===== Push Rules Dialog ===== */
.push-rules-dialog {
  min-width: 360px;
}
.push-rules-dialog__description {
  color: var(--text-secondary, #aaa);
  margin-bottom: 16px;
}
.push-rules-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.push-rules-dialog__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
.push-rules-dialog__option:hover {
  background: var(--bg-hover, #1a2744);
}
.push-rules-dialog__option input[type="radio"] {
  margin-top: 4px;
}
.push-rules-dialog__option p {
  margin: 2px 0 0;
  font-size: 0.85em;
  color: var(--text-muted, #888);
}
.push-rules-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ===== Integration Manager ===== */
.integration-manager {
  min-width: 400px;
}
.integration-manager__section {
  margin-bottom: 20px;
}
.integration-manager__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.integration-manager__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #333);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.integration-manager__item:hover {
  background: var(--bg-hover, #1a2744);
}
.integration-manager__item--selected {
  border-color: var(--accent-color, #4a9eff);
  background: var(--accent-bg, #1a3a5c);
}
.integration-manager__item-info p {
  margin: 2px 0 0;
  font-size: 0.85em;
  color: var(--text-muted, #888);
}
.integration-manager__form {
  border-top: 1px solid var(--border-color, #333);
  padding-top: 16px;
}
.integration-manager__field {
  margin-bottom: 12px;
}
.integration-manager__field label {
  display: block;
  font-size: 0.9em;
  font-weight: 500;
  margin-bottom: 4px;
}
.integration-manager__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ===== Widget Layout ===== */
.widget-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}
.widget-layout__widget {
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  overflow: hidden;
}
.widget-layout__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary, #16213e);
  border-bottom: 1px solid var(--border-color, #333);
}
.widget-layout__name {
  font-weight: 500;
}
.widget-layout__type {
  font-size: 0.8em;
  color: var(--text-muted, #888);
}
.widget-layout__container {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-layout__placeholder {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary, #aaa);
}
.widget-layout__url {
  font-size: 0.8em;
  color: var(--text-muted, #888);
  margin: 8px 0;
  word-break: break-all;
}

/* ===== Account Deactivation ===== */
.account-deactivation__warning {
  padding: 16px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 8px;
  margin-bottom: 16px;
}
.account-deactivation__warning h4 {
  margin: 0 0 8px;
}
.account-deactivation__warning ul {
  margin: 8px 0;
  padding-left: 24px;
}
.account-deactivation__step {
  margin-top: 16px;
}
.account-deactivation__field {
  margin-bottom: 12px;
}
.account-deactivation__field label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}
.account-deactivation__error {
  padding: 8px 12px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  margin: 8px 0;
}
.account-deactivation__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.settings-section--danger {
  border: 1px solid #e53935;
  border-radius: 8px;
  padding: 16px;
  margin-top: 24px;
}
.settings-section--danger h4 {
  color: #e53935;
}

/* ===== Rageshake/Bug Report ===== */
.rageshake {
  min-width: 400px;
}
.rageshake__description {
  color: var(--text-secondary, #aaa);
  margin-bottom: 12px;
}
.rageshake__input {
  width: 100%;
  resize: vertical;
}
.rageshake__options {
  margin: 12px 0;
}
.rageshake__debug-info {
  background: var(--bg-tertiary, #0f1525);
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  font-family: monospace;
  font-size: 0.85em;
}
.rageshake__debug-item {
  display: flex;
  gap: 4px;
  padding: 2px 0;
}
.rageshake__debug-item span:first-child {
  color: var(--text-muted, #888);
}
.rageshake__error {
  padding: 8px 12px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  margin: 8px 0;
}
.rageshake__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.rageshake__success {
  text-align: center;
  padding: 24px;
}
.rageshake__success h4 {
  color: #4caf50;
  margin-bottom: 8px;
}

/* ===== Bubble Layout ===== */
.timeline-panel--bubble .event-tile {
  max-width: 75%;
}
.timeline-panel--bubble .event-tile--own {
  margin-left: auto;
}
.timeline-panel--bubble .event-tile--own .event-tile__content {
  background: var(--accent-bg, #1a3a5c);
  border-radius: 16px 16px 4px 16px;
}
.timeline-panel--bubble .event-tile:not(.event-tile--own) .event-tile__content {
  background: var(--bg-secondary, #16213e);
  border-radius: 16px 16px 16px 4px;
}
.timeline-panel--bubble .event-tile__content {
  padding: 10px 14px;
}

/* ===== Button danger variant ===== */
.btn--danger {
  background: #e53935;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.btn--danger:hover {
  background: #c62828;
}
.btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Settings textarea ===== */
.settings-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-input, #0f1525);
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.95em;
  resize: vertical;
}
.settings-textarea:focus {
  outline: none;
  border-color: var(--accent-color, #4a9eff);
}

/* ===== QR Verification ===== */
.qr-verification {
  min-width: 380px;
}
.qr-verification__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 30px;
}
.qr-verification__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.qr-verification__qr-container {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-verification__qr-code {
  font-family: monospace;
  font-size: 3px;
  line-height: 3px;
  letter-spacing: 0;
  white-space: pre;
  color: #000;
}
.qr-verification__instructions {
  text-align: center;
  color: var(--text-secondary, #aaa);
  font-size: 0.9em;
}
.qr-verification__instructions ol {
  text-align: left;
  margin: 12px 0;
  padding-left: 24px;
}
.qr-verification__instructions li {
  margin-bottom: 6px;
}
.qr-verification__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.qr-verification__error {
  padding: 10px 14px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
}

/* ===== Video Room ===== */
.video-room {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #0a0e1a);
}
.video-room__join-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  flex: 1;
}
.video-room__join-prompt h3 {
  margin: 0;
}
.video-room__join-prompt p {
  color: var(--text-secondary, #aaa);
}
.video-room__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  padding: 8px;
  flex: 1;
  overflow: auto;
}
.video-room__participant {
  aspect-ratio: 16 / 9;
  background: var(--bg-secondary, #16213e);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.video-room__participant-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-color, #4a9eff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: 600;
  color: #fff;
}
.video-room__participant-name {
  font-size: 0.9em;
}
.video-room__participant-status {
  font-size: 0.75em;
  color: var(--text-muted, #888);
}
.video-room__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary, #16213e);
  border-top: 1px solid var(--border-color, #333);
}

/* ===== Custom Theme Dialog ===== */
.custom-theme-dialog {
  min-width: 440px;
}
.custom-theme-dialog__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.custom-theme-dialog__editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.custom-theme-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.custom-theme-dialog__field label {
  font-size: 0.9em;
  font-weight: 500;
}
.custom-theme-dialog__input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.custom-theme-dialog__input-row input[type="color"] {
  width: 40px;
  height: 34px;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
}
.custom-theme-dialog__hex-input {
  width: 100px;
  padding: 6px 8px;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  background: var(--bg-input, #0f1525);
  color: var(--text-primary, #e0e0e0);
  font-family: monospace;
  font-size: 0.9em;
}
.custom-theme-dialog__preview {
  margin-top: 12px;
}
.custom-theme-dialog__import {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.custom-theme-dialog__error {
  padding: 8px 12px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
}
.custom-theme-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.custom-theme-dialog__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  border-top: 1px solid var(--border-color, #333);
  padding-top: 16px;
}

/* ===== Bridge Status Indicator ===== */
.bridge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  color: var(--text-muted, #888);
  padding: 3px 8px;
  background: var(--bg-tertiary, #0f1525);
  border-radius: 12px;
}
.bridge-status__icon {
  font-size: 1.1em;
}

/* ===== Ban List Dialog ===== */
.ban-list-dialog {
  min-width: 420px;
}
.ban-list-dialog__add {
  margin-bottom: 20px;
}
.ban-list-dialog__add h4 {
  margin: 0 0 10px;
}
.ban-list-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ban-list-dialog__error {
  padding: 8px 12px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  margin: 8px 0;
}
.ban-list-dialog__list h4 {
  margin: 0 0 12px;
}
.ban-list-dialog__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ban-list-dialog__empty {
  color: var(--text-muted, #888);
  text-align: center;
  padding: 16px;
}
.ban-list-dialog__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  margin-bottom: 6px;
}
.ban-list-dialog__entry-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ban-list-dialog__entry-name {
  font-weight: 500;
}
.ban-list-dialog__entry-id {
  font-size: 0.85em;
  color: var(--text-muted, #888);
}
.ban-list-dialog__entry-reason {
  font-size: 0.8em;
  color: var(--text-secondary, #aaa);
  font-style: italic;
}

/* ===== Bulk Moderation ===== */
.bulk-moderation {
  min-width: 420px;
}
.bulk-moderation__actions-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.bulk-moderation__actions-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.bulk-moderation__error {
  padding: 8px 12px;
  background: var(--error-bg, #3a1a1a);
  color: var(--error-text, #f44336);
  border-radius: 6px;
  margin: 8px 0;
}
.bulk-moderation__result {
  padding: 8px 12px;
  background: var(--success-bg, #1a3a1a);
  color: var(--success-text, #4caf50);
  border-radius: 6px;
  margin: 8px 0;
}
.bulk-moderation__execute-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border-color, #333);
  border-bottom: 1px solid var(--border-color, #333);
  margin: 12px 0;
}
.bulk-moderation__list {
  max-height: 400px;
  overflow-y: auto;
}
.bulk-moderation__member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.bulk-moderation__member:hover {
  background: var(--bg-hover, #1a2744);
}
.bulk-moderation__member-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bulk-moderation__member-name {
  font-weight: 500;
}
.bulk-moderation__member-id {
  font-size: 0.8em;
  color: var(--text-muted, #888);
}
.bulk-moderation__member-pl {
  font-size: 0.75em;
  color: var(--accent-color, #4a9eff);
  background: var(--accent-bg, #1a3a5c);
  padding: 1px 6px;
  border-radius: 10px;
}

/* ===== CAPTCHA Challenge ===== */
.captcha-challenge {
  margin: 16px 0;
}
.captcha-challenge__label {
  font-weight: 500;
  margin-bottom: 8px;
}
.captcha-challenge__description {
  font-size: 0.85em;
  color: var(--text-secondary, #aaa);
  margin-bottom: 8px;
}
.captcha-challenge__placeholder {
  padding: 24px;
  border: 2px dashed var(--border-color, #333);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin: 12px 0;
}
.captcha-challenge__icon {
  font-size: 2em;
}
.captcha-challenge__info {
  font-size: 0.8em;
  color: var(--text-muted, #888);
  margin-top: 4px;
}

/* ===== LaTeX Math Rendering ===== */
.latex-math {
  font-family: "Computer Modern", "STIX", "Times New Roman", serif;
}
.latex-inline {
  display: inline;
  font-style: italic;
}
.latex-display {
  display: block;
  text-align: center;
  margin: 12px 0;
  padding: 8px;
  font-size: 1.1em;
}

/* ===== Image Viewer Rotation ===== */
.image-viewer__img {
  transition: transform 0.3s ease;
  max-width: 100%;
  max-height: 80vh;
  cursor: zoom-in;
}
.image-viewer__img--zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.image-viewer__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== Emoji Shortcode Autocomplete ===== */
.emoji-shortcode-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  padding: 4px 0;
}
.emoji-shortcode-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary, #1a1a1a);
  text-align: left;
  transition: background-color 0.1s ease;
}
.emoji-shortcode-autocomplete__item:hover,
.emoji-shortcode-autocomplete__item:focus {
  background: var(--bg-hover, #f0f0f0);
}
.emoji-shortcode-autocomplete__emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.emoji-shortcode-autocomplete__name {
  color: var(--text-secondary, #666);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Live Location Sharing ===== */
.live-location {
  padding: var(--space-lg);
}
.live-location h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}
.live-location__desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
}
.live-location__options {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.live-location__option {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.live-location__option:hover {
  background: var(--bg-hover);
}
.live-location__option--selected {
  border-color: var(--accent-primary);
  background: rgba(13, 189, 139, 0.1);
}
.live-location__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}
.live-location__active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}
.live-location__pulse {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--accent-primary);
  animation: live-location-pulse 1.5s ease-in-out infinite;
}
@keyframes live-location-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
}
.live-location__timer {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* ===== Voice Broadcast ===== */
.voice-broadcast {
  padding: var(--space-lg);
}
.voice-broadcast h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}
.voice-broadcast__start p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
}
.voice-broadcast__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}
.voice-broadcast__live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}
.voice-broadcast__indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-danger);
}
.voice-broadcast__live-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--accent-danger);
  animation: voice-broadcast-blink 1s ease-in-out infinite;
}
@keyframes voice-broadcast-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.voice-broadcast__timer {
  font-size: var(--font-size-xxl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.voice-broadcast__controls {
  display: flex;
  gap: var(--space-md);
}
.voice-broadcast__control-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.voice-broadcast__control-btn:hover {
  background: var(--bg-hover);
}
.voice-broadcast__control-btn--stop {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}
.voice-broadcast__control-btn--stop:hover {
  background: rgba(255, 91, 85, 0.1);
}

/* ===== Voice & Video Settings ===== */
.voice-video-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.voice-video-settings .settings-section h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}
.voice-video-settings .settings-field {
  margin-bottom: var(--space-md);
}
.voice-video-settings .settings-field label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
.settings-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}
.settings-select:focus {
  border-color: var(--border-focused);
}

/* ===== DevTools ===== */
.devtools {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 400px;
}
.devtools__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
}
.devtools__tab {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.devtools__tab:hover {
  color: var(--text-primary);
}
.devtools__tab--active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.devtools__state-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
}
.devtools__state-entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.devtools__state-entry:hover {
  background: var(--bg-hover);
}
.devtools__state-type {
  font-family: monospace;
  font-weight: 600;
  color: var(--text-link);
  flex-shrink: 0;
}
.devtools__state-preview {
  color: var(--text-disabled);
  font-family: monospace;
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.devtools__state-detail {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.devtools__state-detail h4 {
  font-family: monospace;
  font-size: var(--font-size-md);
  color: var(--text-link);
  margin-bottom: var(--space-md);
}
.devtools__json {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--space-md);
}
.devtools__account-data {
  padding: var(--space-md);
}
.devtools__account-data p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}
.devtools__send-event {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
}
.devtools__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.devtools__field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ========== Room Settings (Comprehensive) ========== */

.room-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 400px;
}

.room-settings__tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--space-xs);
}

.room-settings__tab {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.room-settings__tab:hover {
  color: var(--text-primary);
}

.room-settings__tab--active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.room-settings__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-md);
}

.room-settings__section h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.room-settings__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.room-settings__field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.room-settings__error {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 91, 85, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

.room-settings__success {
  padding: var(--space-sm) var(--space-md);
  background: rgba(80, 200, 120, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent-success);
  font-size: var(--font-size-sm);
}

.room-settings__radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.room-settings__radio-group label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}

.room-settings__radio-group label:hover {
  background: var(--bg-hover);
}

.room-settings__radio-group input[type="radio"] {
  accent-color: var(--accent-primary);
  margin-top: 4px;
  flex-shrink: 0;
}

.room-settings__radio-group div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-settings__radio-group strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.room-settings__radio-group p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

.room-settings__permissions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.room-settings__permission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.room-settings__permission-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-settings__permission-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.room-settings__permission-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.room-settings__permission-level {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.room-settings__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.room-settings__info-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.room-settings__info-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.room-settings__info-value {
  font-family: monospace;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

.room-settings__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.room-settings__address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.room-settings__address span {
  font-family: monospace;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.room-settings__address-add {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.room-settings__address-add input {
  flex: 1;
}

.room-settings__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-default);
}

/* ========== Session Verification Prompt ========== */

.session-prompt {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.session-prompt__card {
  width: 90%;
  max-width: 440px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.session-prompt__icon {
  font-size: 2.5em;
}

.session-prompt__card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.session-prompt__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.session-prompt__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.session-prompt__option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.session-prompt__option:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.session-prompt__option strong {
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: 2px;
}

.session-prompt__option p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

.session-prompt__skip {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-sm);
  margin-top: var(--space-xs);
}

.session-prompt__skip:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.session-prompt__key-input,
.session-prompt__another {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
}

.session-prompt__key-input h4,
.session-prompt__another h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.session-prompt__another p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.session-prompt__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ========== Secure Backup Toast ========== */

.backup-toast {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 420px;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: backup-toast-slide-in 0.3s ease;
}

@keyframes backup-toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.backup-toast__icon {
  font-size: 1.5em;
  flex-shrink: 0;
}

.backup-toast__content {
  flex: 1;
  min-width: 0;
}

.backup-toast__content strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

.backup-toast__content p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.backup-toast__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ========== Privacy Toggles ========== */

.privacy-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.privacy-toggles h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

/* ========== Settings Toggle (checkbox row) ========== */

.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-toggle:hover {
  background: var(--bg-hover);
}

.settings-toggle input[type="checkbox"] {
  accent-color: var(--accent-primary);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.settings-toggle div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-toggle strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.settings-toggle p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

/* ========== HTML Tables in Messages ========== */

.message-content--text table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
  margin: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  overflow-x: auto;
  display: block;
}

.message-content--text thead {
  background: var(--bg-tertiary);
}

.message-content--text th,
.message-content--text td {
  border: 1px solid var(--border-default);
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
}

.message-content--text th {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.message-content--text tr:nth-child(even) {
  background: var(--bg-secondary);
}

.message-content--text caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: var(--space-xs) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.message-content--text tfoot {
  font-style: italic;
  color: var(--text-secondary);
}

/* ========== Collapsible Reply Preview ========== */

.reply-preview__body--truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.reply-preview__body--expanded {
  white-space: normal;
  overflow: visible;
}

.reply-preview__toggle {
  display: inline-block;
  background: none;
  border: none;
  color: var(--text-link);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: 2px 0;
  margin-top: 2px;
  font-weight: 500;
}

.reply-preview__toggle:hover {
  text-decoration: underline;
}

/* ========== Thread Unread Badge ========== */

.thread-summary__unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

/* ========== Local Search Dialog ========== */

.local-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.local-search-dialog {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  width: 600px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: slideDown 0.2s ease;
}

.local-search-dialog__header {
  display: flex;
  align-items: flex-start;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-default);
  position: relative;
  flex-wrap: wrap;
}

.local-search-dialog__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.local-search-dialog__subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 2px 0 0 0;
  width: 100%;
}

.local-search-dialog__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  line-height: 1;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  transition: background 0.15s ease, color 0.15s ease;
}

.local-search-dialog__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.local-search-dialog__controls {
  padding: var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--border-default);
}

.local-search-dialog__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  transition: border-color 0.15s ease;
}

.local-search-dialog__input-row:focus-within {
  border-color: var(--border-focused);
}

.local-search-dialog__search-icon {
  font-size: var(--font-size-md);
  flex-shrink: 0;
  opacity: 0.6;
}

.local-search-dialog__input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  outline: none;
  font-family: var(--font-family);
}

.local-search-dialog__input::placeholder {
  color: var(--text-disabled);
}

.local-search-dialog__filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.local-search-dialog__filter-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  flex-shrink: 0;
  font-weight: 500;
}

.local-search-dialog__filter-select {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-family);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}

.local-search-dialog__filter-select:focus {
  border-color: var(--border-focused);
}

.local-search-dialog__filter-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.local-search-dialog__stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-xl);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}

.local-search-dialog__stats-text {
  font-weight: 500;
}

.local-search-dialog__stats-count {
  opacity: 0.7;
}

.local-search-dialog__results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
  min-height: 100px;
  max-height: 400px;
}

.local-search-dialog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl) var(--space-xl);
  color: var(--text-secondary);
  text-align: center;
}

.local-search-dialog__empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.local-search-dialog__empty p {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.local-search-dialog__empty-hint {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.local-search-dialog__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-xl);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-default);
}

.local-search-dialog__result:last-child {
  border-bottom: none;
}

.local-search-dialog__result:hover {
  background: var(--bg-hover);
}

.local-search-dialog__result-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
}

.local-search-dialog__result-sender {
  color: var(--accent-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.local-search-dialog__result-room {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.local-search-dialog__result-room::before {
  content: "in ";
  color: var(--text-disabled);
}

.local-search-dialog__result-time {
  color: var(--text-disabled);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
}

.local-search-dialog__result-snippet {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
}

.local-search-dialog__result-snippet mark {
  background: rgba(255, 200, 50, 0.3);
  color: var(--accent-warning);
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

.local-search-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-sm) var(--space-xl);
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

/* ==========================================================================
   OIDC Login
   ========================================================================== */

.oidc-login {
  margin-top: var(--space-md);
}

.oidc-login__error {
  background: rgba(255, 91, 85, 0.1);
  border: 1px solid var(--accent-danger);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

.oidc-login__checking {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-sm) 0;
}

.oidc-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.oidc-login-button:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-focused);
}

.oidc-login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   3PID Settings (Email & Phone Management)
   ========================================================================== */

.threepid-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.threepid-settings h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.threepid-settings h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
}

.threepid-settings__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.threepid-settings__error {
  background: rgba(255, 91, 85, 0.1);
  border: 1px solid var(--accent-danger);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--accent-danger);
  font-size: var(--font-size-sm);
}

.threepid-settings__section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.threepid-settings__empty {
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
  margin: 0;
  padding: var(--space-sm) 0;
}

.threepid-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}

.threepid-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--accent-primary);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.threepid-item__address {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.threepid-item__medium {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.threepid-settings__add-btn {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.threepid-settings__add-form {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.threepid-settings__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.threepid-settings__input-row input[type="email"],
.threepid-settings__input-row input[type="tel"],
.threepid-settings__input-row input[type="text"] {
  flex: 1;
  min-width: 150px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  outline: none;
  transition: border-color 0.15s ease;
}

.threepid-settings__input-row input:focus {
  border-color: var(--border-focused);
}

.threepid-settings__country-select {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.threepid-settings__country-select:focus {
  border-color: var(--border-focused);
}

.threepid-settings__country-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.threepid-settings__field-error {
  font-size: var(--font-size-xs);
  color: var(--accent-danger);
  padding: var(--space-xs) 0;
}

.threepid-settings__info {
  font-size: var(--font-size-sm);
  color: var(--accent-success);
  padding: var(--space-sm) var(--space-md);
  background: rgba(13, 189, 139, 0.1);
  border: 1px solid var(--accent-success);
  border-radius: var(--radius-sm);
}

.threepid-settings__verification-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.threepid-settings__confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.threepid-settings__confirm-dialog {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 400px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.threepid-settings__confirm-dialog h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
}

.threepid-settings__confirm-dialog p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg) 0;
  line-height: 1.5;
}

.threepid-settings__confirm-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* ==========================================================================
   Presence Indicator - Custom Status Text
   ========================================================================== */

.presence-indicator-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.presence-indicator__status-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  font-style: italic;
  line-height: 1.3;
}

/* ==========================================================================
   Room Upgrade Dialog & Banner
   ========================================================================== */

.room-upgrade-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 400px;
}

.room-upgrade-dialog__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.room-upgrade-dialog__current {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.room-upgrade-dialog__current strong {
  color: var(--text-primary);
}

.room-upgrade-dialog__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.room-upgrade-dialog__select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.room-upgrade-dialog__warning {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 91, 85, 0.1);
  border: 1px solid var(--accent-danger);
  border-radius: var(--radius-md);
}

.room-upgrade-dialog__warning-icon {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--accent-danger);
  flex-shrink: 0;
}

.room-upgrade-dialog__warning-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.room-upgrade-dialog__warning-text p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.room-upgrade-dialog__summary {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.room-upgrade-dialog__summary p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.room-upgrade-dialog__summary strong {
  color: var(--text-primary);
}

.room-upgrade-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}

.room-upgrade-dialog__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}

.room-upgrade-dialog__progress p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.room-upgrade-dialog__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  text-align: center;
}

.room-upgrade-dialog__success-icon {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--accent-success);
}

.room-upgrade-dialog__success p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.room-upgrade-dialog__new-room-id {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.room-upgrade-dialog__new-room-id code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  color: var(--text-secondary);
}

.room-upgrade-dialog__error {
  padding: var(--space-md);
}

.room-upgrade-dialog__error-text {
  font-size: var(--font-size-sm);
  color: var(--accent-danger);
  margin: 0;
}

/* Room Upgrade Banner */

.room-upgrade-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(255, 197, 109, 0.1), rgba(255, 91, 85, 0.05));
  border-bottom: 1px solid var(--accent-warning);
}

.room-upgrade-banner__icon {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--accent-warning);
  flex-shrink: 0;
}

.room-upgrade-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}

.room-upgrade-banner__text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.room-upgrade-banner__join-btn {
  flex-shrink: 0;
}

/* ==========================================================================
   Element Call Embedded Widget
   ========================================================================== */

.element-call {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.element-call__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.element-call__branding {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.element-call__logo {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--accent-primary);
}

.element-call__status {
  font-size: var(--font-size-xs);
  color: var(--accent-success);
  padding: 2px var(--space-sm);
  background: rgba(13, 189, 139, 0.1);
  border-radius: var(--radius-pill);
}

/* Join screen */

.element-call__join-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xxl) var(--space-lg);
  gap: var(--space-xl);
}

.element-call__join-info {
  text-align: center;
}

.element-call__join-info h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
}

.element-call__join-info p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

.element-call__preview {
  width: 280px;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
}

.element-call__preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--text-disabled);
}

.element-call__join-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.element-call__join-btn {
  padding: var(--space-md) var(--space-xxl);
  font-size: var(--font-size-md);
}

.element-call__browser-link {
  font-size: var(--font-size-xs);
  color: var(--text-link);
  text-decoration: none;
}

.element-call__browser-link:hover {
  text-decoration: underline;
}

/* Active call embed area */

.element-call__embed {
  flex: 1;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.element-call__embed-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: var(--bg-canvas);
  padding: var(--space-xl);
}

.element-call__embed-placeholder p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.element-call__embed-url {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
}

.element-call__embed-url code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: monospace;
}

.element-call__participants-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  padding: var(--space-lg);
}

.element-call__self-view {
  width: 160px;
  height: 120px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 2px solid var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Call controls bar */

.element-call__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
}

.element-call__control-btn {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.element-call__control-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-disabled);
}

.element-call__control-btn--active {
  background: var(--accent-warning);
  color: var(--bg-primary);
  border-color: var(--accent-warning);
}

.element-call__control-btn--active:hover {
  background: #e0a84f;
  border-color: #e0a84f;
}

.element-call__control-btn--hangup {
  background: var(--accent-danger);
  color: white;
  border-color: var(--accent-danger);
}

.element-call__control-btn--hangup:hover {
  background: var(--accent-danger-hover);
  border-color: var(--accent-danger-hover);
}

/* Fallback bar */

.element-call__fallback {
  display: flex;
  justify-content: center;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-default);
}

/* Ended screen */

.element-call__ended {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xxl) var(--space-lg);
  gap: var(--space-md);
}

.element-call__ended h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.element-call__ended p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.element-call__ended-actions {
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-md);
}

/* ==========================================================================
   Server-Side Sticker Packs (enhanced sticker picker)
   ========================================================================== */

.sticker-picker__tab-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 var(--space-xs);
  vertical-align: middle;
}

.sticker-picker__tab--server {
  font-size: var(--font-size-xs);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticker-picker__sticker--server {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 72px;
  height: 80px;
  padding: var(--space-xs);
}

.sticker-picker__sticker-preview {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-picker__sticker-placeholder {
  font-size: 9px;
  color: var(--text-disabled);
  text-align: center;
  padding: 2px;
  word-break: break-word;
  line-height: 1.2;
  overflow: hidden;
}

.sticker-picker__sticker-name {
  font-size: 9px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticker-picker__sticker--server:hover .sticker-picker__sticker-name {
  color: var(--text-primary);
}

.sticker-picker__sticker--server:hover .sticker-picker__sticker-preview {
  border: 1px solid var(--accent-primary);
}

.sticker-picker__get-stickers-btn {
  background: var(--accent-primary);
  color: white;
  border: none;
}

.sticker-picker__get-stickers-btn:hover {
  background: var(--accent-primary-hover);
}

/* "Get Stickers" overlay */

.sticker-picker__get-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.sticker-picker__get-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.sticker-picker__get-header h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.sticker-picker__get-close {
  background: none;
  border: none;
  color: var(--text-link);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
}

.sticker-picker__get-close:hover {
  text-decoration: underline;
}

.sticker-picker__get-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg);
}

.sticker-picker__get-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg) 0;
  line-height: 1.5;
}

.sticker-picker__available-packs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sticker-picker__available-pack {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.sticker-picker__available-pack:hover {
  background: var(--bg-hover);
}

.sticker-picker__pack-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.sticker-picker__pack-icon--placeholder {
  background: var(--bg-tertiary);
  color: var(--text-disabled);
}

.sticker-picker__pack-info {
  flex: 1;
  min-width: 0;
}

.sticker-picker__pack-info strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.sticker-picker__pack-info p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 2px 0 0 0;
}

.sticker-picker__pack-status {
  font-size: var(--font-size-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.sticker-picker__pack-status--added {
  background: rgba(13, 189, 139, 0.1);
  color: var(--accent-success);
}

/* ==========================================================================
   Widget Frame
   ========================================================================== */

.widget-frame {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
}

.widget-frame__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-default);
  min-height: 40px;
}

.widget-frame__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.widget-frame__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-frame__url-badge {
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.widget-frame__status {
  font-size: var(--font-size-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.widget-frame__status--connected {
  background: rgba(13, 189, 139, 0.15);
  color: var(--accent-success);
}

.widget-frame__status--disconnected {
  background: rgba(255, 91, 85, 0.15);
  color: var(--accent-danger);
}

.widget-frame__actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.widget-frame__action-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}

.widget-frame__action-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.widget-frame__action-btn--close {
  color: var(--accent-danger);
}

.widget-frame__action-btn--close:hover {
  background: rgba(255, 91, 85, 0.15);
  color: var(--accent-danger);
}

.widget-frame__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-xl);
}

.widget-frame__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 400px;
}

.widget-frame__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--text-disabled);
  text-transform: uppercase;
}

.widget-frame__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.widget-frame__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.widget-frame__url-display {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-canvas);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.widget-frame__url-display code {
  font-size: var(--font-size-xs);
  color: var(--text-link);
  word-break: break-all;
}

/* ==========================================================================
   Element Call - Enhanced Active State
   ========================================================================== */

.element-call__status--active {
  background: rgba(13, 189, 139, 0.15);
  color: var(--accent-success);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.element-call__active-banner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: linear-gradient(135deg, rgba(13, 189, 139, 0.08) 0%, rgba(13, 189, 139, 0.02) 100%);
  border-bottom: 1px solid var(--border-default);
}

.element-call__active-banner-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: rgba(13, 189, 139, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.element-call__pulse-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--accent-success);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 189, 139, 0);
  }
}

.element-call__active-banner-text {
  flex: 1;
  min-width: 0;
}

.element-call__active-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.element-call__active-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.element-call__url-section {
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--border-default);
}

.element-call__url-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.element-call__url-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.element-call__url-code {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--text-link);
  word-break: break-all;
  padding: var(--space-xs) var(--space-sm);
  min-width: 0;
}

.element-call__copy-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.element-call__copy-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.element-call__copy-btn--copied {
  background: rgba(13, 189, 139, 0.15);
  color: var(--accent-success);
  border-color: var(--accent-success);
}

.element-call__open-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.element-call__open-btn:hover {
  background: var(--accent-primary-hover);
}