/* Independent message colors retain readable text across all app themes. */
:root[data-chat-sent-color] :is(.social-chat .social-message.is-own .social-message-bubble,.chat-hub .own-message .chat-message) {
  background:var(--chat-sent-bg);color:var(--chat-sent-fg);border-color:transparent;
  box-shadow:0 2px 8px color-mix(in srgb,var(--chat-sent-bg) 14%,transparent);
}
:root[data-chat-received-color] :is(.social-chat .social-message:not(.is-own) .social-message-bubble,.chat-hub .chat-group:not(.own-message) .chat-message) {
  background:var(--chat-received-bg);color:var(--chat-received-fg);border-color:transparent;
}
.chat-appearance-trigger {display:inline-grid;place-items:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:6px;border:0;background:transparent;color:var(--theme-text-secondary);cursor:pointer;flex:none}
.chat-appearance-trigger svg {width:18px;height:18px}
.chat-header-actions {display:flex;align-items:center;gap:6px}
.chat-header-actions>.icon-button {display:grid;place-items:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:6px;flex:none}
.chat-header-actions svg {width:18px;height:18px}
.chat-hub .panel-header .chat-appearance-trigger,.social-panel .social-header .chat-appearance-trigger {
  display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0;border-radius:9px;
  transition:background .16s ease,color .16s ease;
}
.chat-hub .panel-header .chat-appearance-trigger>svg,.social-panel .social-header .chat-appearance-trigger>svg {
  display:block;width:18px;height:18px;flex:none;margin:0;transform-origin:center;
}
.chat-appearance-trigger:not(:disabled):is(:hover,:focus-visible,[aria-expanded=true]) {
  background:var(--theme-surface-hover);color:var(--theme-text-primary);
}
.chat-appearance-trigger:not(:disabled):is(:hover,:focus-visible)>svg {animation:nexo-chat-brush-stroke 380ms cubic-bezier(.22,.8,.25,1)}
@keyframes nexo-chat-brush-stroke {
  0%,100% {transform:none}
  45% {transform:translateY(-1px) rotate(-10deg)}
  75% {transform:translateY(-.5px) rotate(5deg)}
}
.chat-appearance-panel {position:fixed;inset:auto;margin:0;padding:16px;width:340px;max-width:none;overflow:auto;overscroll-behavior:contain;border:1px solid var(--theme-border-subtle);border-radius:16px;background:var(--theme-surface-card);color:var(--theme-text-primary);box-shadow:0 12px 32px rgba(0,0,0,.25);font-size:12px}
.chat-appearance-panel:popover-open {animation:nexo-chat-colors-in 200ms cubic-bezier(.22,.8,.25,1)}
@keyframes nexo-chat-colors-in {
  from {opacity:0;transform:translateY(5px) scale(.99)}
  to {opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce) {
  .chat-appearance-trigger,.chat-appearance-trigger>svg,.chat-appearance-panel:popover-open {animation:none!important;transition:none!important}
}
.chat-appearance-panel>header {display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-appearance-panel>header strong {font-size:15px}
.chat-appearance-panel>header button {position:relative;inset:auto;display:grid;place-items:center;width:28px;height:28px;padding:5px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.chat-appearance-panel>header svg {width:18px;height:18px}
.chat-appearance-panel>p {margin:4px 0 12px;color:var(--theme-text-muted);font-size:11px}
.chat-color-preview {display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:10px;background:var(--theme-input);margin-bottom:14px}
.chat-color-preview>span {padding:8px 10px;border-radius:12px 12px 12px 4px;font-size:11px;max-width:95%}
.chat-color-preview-received {background:var(--chat-received-bg,var(--theme-surface-interactive));color:var(--chat-received-fg,var(--theme-text-primary))}
.chat-color-preview .chat-color-preview-sent {align-self:flex-end;border-radius:12px 12px 4px 12px;background:var(--chat-sent-bg,var(--theme-primary));color:var(--chat-sent-fg,var(--theme-on-primary))}
.chat-appearance-panel fieldset {min-width:0;margin:0 0 14px;padding:0;border:0}
.chat-appearance-panel legend {padding:0;margin-bottom:8px;font-weight:650;font-size:12px}
.chat-color-choices {display:flex;flex-wrap:wrap;gap:8px}
.chat-color-choice {position:relative;display:grid;place-items:center;width:26px;height:26px;min-width:26px;min-height:26px;padding:0;flex:none;border:1px solid var(--theme-border-subtle);border-radius:50%;background:var(--swatch,var(--theme-surface-interactive));color:var(--theme-text-primary);cursor:pointer}
.chat-color-choice svg {width:14px;height:14px}
.chat-color-choice[aria-pressed=true] {outline:2px solid var(--theme-text-primary);outline-offset:2px}
.chat-color-custom {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;color:var(--theme-text-secondary);font-size:11px}
.chat-color-custom input {width:36px;height:26px;min-height:0;padding:2px;border:1px solid var(--theme-border-subtle);border-radius:6px;background:var(--theme-input);cursor:pointer}
.chat-color-reset {width:100%;padding:8px 10px;border:1px solid var(--theme-border-subtle);border-radius:9px;background:transparent;color:var(--theme-text-primary);font:inherit;cursor:pointer}
.chat-color-reset:disabled {opacity:.4;cursor:default}
.chat-appearance-panel button:focus-visible,.chat-appearance-panel input:focus-visible {outline:2px solid var(--theme-focus);outline-offset:3px}

/* A unified pending preview and composer, shared by room chat and DMs. */
:is(.social-panel,.chat-panel) :is(.social-composer,.chat-composer).has-pending-attachment {
  display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;padding:0 10px 8px;margin-top:10px;
  border:1px solid var(--theme-border-subtle);border-radius:14px;background:var(--theme-input);flex:none;
}
.chat-panel .chat-composer.has-pending-attachment {margin:10px 14px}
.has-pending-attachment>.chat-pending-attachment {
  display:flex;align-items:center;gap:14px;flex:0 0 100%;min-width:0;margin:0 0 8px;padding:12px 0;
  border:0;border-bottom:1px solid var(--theme-border-subtle);border-radius:0;background:transparent;
}
.chat-pending-attachment.has-media .chat-pending-preview {flex:0 1 40%;width:40%;max-width:210px;min-width:80px;height:auto;aspect-ratio:16/9;max-height:140px;border-radius:10px;background:var(--theme-surface-elevated)}
.chat-pending-attachment.has-media .chat-pending-preview :is(img,video) {width:100%;height:100%;object-fit:contain}
.chat-pending-info {gap:5px;font-size:12px}
.chat-pending-info .chat-pending-status {display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.4}
.chat-pending-status svg {width:15px;height:15px;flex:none}
.chat-pending-attachment .chat-pending-remove {position:relative;inset:auto;align-self:flex-start;flex:0 0 28px;width:28px;height:28px;padding:5px}
.has-pending-attachment>.social-composer-field,.has-pending-attachment>.chat-composer-field {border:0;background:transparent;box-shadow:none;padding:0;flex:1;min-width:0}
.chat-hub .chat-composer.has-pending-attachment>.send-button {border-radius:50%}
@media(max-width:540px) {
  .chat-panel .chat-composer.has-pending-attachment {margin:8px 10px}
  .has-pending-attachment>.chat-pending-attachment {gap:9px;padding-block:10px}
  .chat-pending-info {font-size:11px}
  .chat-pending-info .chat-pending-status {font-size:10px}
}
@container(max-width:280px) {
  .chat-hub :is(.chat-composer,.social-composer).has-pending-attachment {padding:0 5px 4px;gap:0 4px;margin:6px}
  .has-pending-attachment>.chat-pending-attachment {gap:6px;padding-block:6px;margin-bottom:4px}
  .chat-pending-attachment.has-media .chat-pending-preview {min-width:64px}
  .chat-pending-info .chat-pending-status svg {display:none}
  .chat-hub :is(.chat-composer-field,.social-composer-field) {padding:0}
  .chat-hub :is(.chat-composer-field>.attachment-button,.social-composer-field>[data-social=attach],.chat-emoji-trigger,.social-draft-wrap>[data-social=emoji]) {width:24px;min-width:24px;padding:3px;height:32px;min-height:32px}
  .chat-hub :is(.chat-composer,.social-composer)>button[type=submit] {width:32px;min-width:32px;height:32px;min-height:32px;padding:7px}
  .chat-hub :is(.chat-draft-wrap #chat-input,.social-draft-wrap #social-draft) {padding-inline:2px}
}