:root{
  --nav-height:4rem;
  --status-bar-height:0px;
  --chat-sidebar-width:280px;
  --chat-context-width:240px;
  --chat-header-height:56px;
  --chat-input-min-height:44px;
  --chat-input-max-height:120px;
  --chat-bottom-tabs-height:56px;
  --chat-panel-transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --chat-input-container-height:68px;
  --chat-online-users-height:64px;
  --app-height:100vh;
  --keyboard-offset:0px;
  --safe-area-top:env(safe-area-inset-top, 0px);
  --safe-area-bottom:env(safe-area-inset-bottom, 0px);
  --safe-area-left:env(safe-area-inset-left, 0px);
  --safe-area-right:env(safe-area-inset-right, 0px);
}
@supports (height:100dvh){
  :root{
    --app-height:100dvh;
  }
}
.chat-layout{
  display:flex;
  flex-direction:column;
  height:calc(var(--app-height) - var(--nav-height, 4rem) - var(--status-bar-height, 40px) - var(--keyboard-offset, 0px));
  overflow:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y pinch-zoom;
}
@media (min-width:768px){
  .chat-layout{
    display:grid;
    grid-template-columns:var(--chat-sidebar-width) 1fr;
    grid-template-rows:1fr;
    height:calc(var(--app-height) - var(--nav-height, 4rem) - var(--status-bar-height, 40px));
  }

  .chat-layout>.chat-main,.chat-layout>.thread-sidebar{
    height:100%;
    min-height:0;
  }
}
#connection-status{
  box-sizing:border-box;
  height:24px;
  min-height:24px;
}
.chat-main{
  flex-direction:column;
  height:100%;
  min-width:0;
  overflow:hidden;
}
.chat-main,.message-list{
  display:flex;
  min-height:0;
}
.message-list{
  flex:1 1 auto;
  flex-direction:column;
  gap:var(--spacing-4);
  overflow-y:auto;
  padding:var(--spacing-6);
}
.message-input-container{
  box-sizing:border-box;
  flex:0 0 auto;
  min-height:var(--chat-input-container-height);
  padding-bottom:var(--safe-area-bottom);
}
.thread-sidebar{
  flex-shrink:0;
}
.online-users-compact{
  box-sizing:border-box;
  flex-shrink:0;
  height:var(--chat-online-users-height);
  min-height:var(--chat-online-users-height);
}
.chat-panels{
  background-color:var(--color-bg-secondary);
  height:calc(var(--app-height) - 4rem);
  overflow:hidden;
  position:relative;
}

.chat-panel{
  background-color:var(--color-bg-primary);
  height:100%;
  position:absolute;
  top:0;
  transition:var(--chat-panel-transition);
  will-change:transform;
}
.chat-panel--left{
  border-right:1px solid var(--color-border-default);
  left:0;
  transform:translateX(-100%);
  width:var(--chat-sidebar-width);
  z-index:10;
}

.chat-panel--left.is-open{
  box-shadow:2px 0 8px rgba(0,0,0,.1);
  transform:translateX(0);
}
.chat-panel--center{
  left:0;
  right:0;
  width:100%;
  z-index:5;
}
.chat-panel--right{
  border-left:1px solid var(--color-border-default);
  right:0;
  transform:translateX(100%);
  width:var(--chat-context-width);
  z-index:10;
}

.chat-panel--right.is-open{
  box-shadow:-2px 0 8px rgba(0,0,0,.1);
  transform:translateX(0);
}
.chat-panel-overlay{
  background-color:rgba(0,0,0,.5);
  inset:0;
  opacity:0;
  pointer-events:none;
  position:absolute;
  transition:opacity .3s ease;
  z-index:8;
}

.chat-panel-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}
.chat-bottom-tabs{
  display:none;
}
.chat-bottom-tabs--enabled{
  align-items:center;
  background-color:var(--color-bg-primary);
  border-top:1px solid var(--color-border-default);
  display:flex;
  height:var(--chat-bottom-tabs-height);
  justify-content:space-around;
  padding:0 var(--spacing-2);
  padding-bottom:var(--safe-area-bottom);
}

.chat-tab{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  justify-content:center;
  min-height:44px;
  min-width:64px;
  padding:var(--spacing-2);
  transition:all var(--transition-fast);
}

.chat-tab:hover{
  background-color:var(--color-bg-secondary);
}

.chat-tab.is-active{
  color:var(--color-primary-600);
}

.chat-tab__icon{
  height:24px;
  width:24px;
}

.chat-tab__label{
  font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
}

.chat-tab__badge{
  align-items:center;
  background-color:var(--color-error-500);
  border-radius:var(--radius-full);
  color:#fff;
  display:flex;
  font-size:10px;
  font-weight:var(--font-weight-bold);
  height:16px;
  justify-content:center;
  min-width:16px;
  padding:0 4px;
  position:absolute;
  right:4px;
  top:4px;
}
.thread-sidebar{
  background-color:var(--color-bg-primary);
  border-right:1px solid var(--color-border-default);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  width:var(--chat-sidebar-width);
}

.thread-sidebar-header{
  border-bottom:1px solid var(--color-border-default);
  padding:var(--spacing-4);
}

.thread-sidebar-header-row{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:var(--spacing-3);
}
.panel-close-btn{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:none;
  height:32px;
  justify-content:center;
  padding:0;
  transition:all var(--transition-fast);
  width:32px;
}
@media (max-width:767px){
  .panel-close-btn{
    display:flex;
  }
}

.panel-close-btn:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.panel-close-btn:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
}

.panel-close-btn svg{
  height:20px;
  width:20px;
}
.thread-search-wrapper{
  align-items:center;
  display:flex;
  position:relative;
}

.thread-search-icon{
  color:var(--color-text-muted);
  left:10px;
  pointer-events:none;
  position:absolute;
}

.thread-search-input{
  background:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:8px;
  color:var(--color-text-primary);
  font-size:13px;
  padding:8px 32px 8px 36px;
  transition:all .15s ease;
  width:100%;
}

.thread-search-input:focus{
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px var(--color-primary-100);
  outline:none;
}

.thread-search-input::placeholder{
  color:var(--color-text-muted);
}

.thread-search-clear{
  align-items:center;
  background:transparent;
  border:none;
  border-radius:4px;
  color:var(--color-text-muted);
  cursor:pointer;
  display:flex;
  height:22px;
  justify-content:center;
  padding:0;
  position:absolute;
  right:6px;
  transition:all .15s ease;
  width:22px;
}

.thread-search-clear:hover{
  background:var(--color-bg-secondary);
  color:var(--color-text-primary);
}
.thread-item.search-hidden{
  display:none !important;
}
.thread-search-no-results{
  color:var(--color-text-muted);
  font-size:13px;
  padding:var(--spacing-4);
  text-align:center;
}

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

.thread-item{
  border-bottom:1px solid var(--color-border-subtle);
  cursor:pointer;
  padding:var(--spacing-4);
  transition:background-color var(--transition-fast);
}

.thread-item:hover{
  background-color:var(--color-bg-secondary);
}

.thread-item.active{
  background-color:var(--color-primary-100);
  border-left:4px solid var(--color-primary-600);
  box-shadow:inset 0 0 0 1px var(--color-primary-200);
  position:relative;
}

.thread-item.active:before{
  background-color:var(--color-primary-600);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  bottom:0;
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:3px;
}

.thread-item.active .thread-title{
  color:var(--color-primary-700);
  font-weight:var(--font-weight-semibold);
}

.thread-title{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  font-weight:var(--font-weight-medium);
  margin-bottom:var(--spacing-1);
}

.thread-preview{
  color:var(--color-text-secondary);
  font-size:var(--text-xs);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.thread-badge{
  background-color:var(--color-primary-600);
  border-radius:var(--radius-full);
  color:#fff;
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:var(--font-weight-semibold);
  min-width:20px;
  padding:2px 8px;
  text-align:center;
}
.thread-item-header{
  align-items:flex-start;
  display:flex;
  gap:var(--spacing-2);
  justify-content:space-between;
  margin-bottom:var(--spacing-1);
}

.thread-item-header .thread-title{
  flex:1;
  margin-bottom:0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.thread-item-meta{
  align-items:center;
  display:flex;
  flex-shrink:0;
  gap:var(--spacing-2);
}

.thread-timestamp{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  white-space:nowrap;
}

.thread-menu-btn{
  align-items:center;
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  display:flex;
  height:24px;
  justify-content:center;
  opacity:0;
  padding:0;
  transition:all var(--transition-fast);
  width:24px;
}

.thread-item:hover .thread-menu-btn{
  opacity:1;
}

.thread-menu-btn:hover{
  background-color:var(--color-bg-tertiary);
  color:var(--color-text-primary);
}

.thread-menu-btn:focus-visible{
  opacity:1;
  outline:2px solid var(--color-primary-500);
  outline-offset:1px;
}
@media (hover:none),(max-width:768px){
  .thread-menu-btn{
    opacity:.6;
  }
  .thread-menu-btn:active{
    background-color:var(--color-bg-tertiary);
    opacity:1;
  }
}
.thread-item--unread .thread-title{
  color:var(--color-text-primary);
  font-weight:var(--font-weight-bold);
}

.thread-item--unread .thread-preview{
  color:var(--color-text-primary);
  font-weight:var(--font-weight-medium);
}

.thread-item--unread .thread-timestamp{
  color:var(--color-primary-600);
  font-weight:var(--font-weight-medium);
}
:root{
  --federation-badge-bg:#e8f4fd;
  --federation-badge-color:#06c;
}

.thread-item--federated{
  border-left:3px solid var(--federation-badge-color);
}

.thread-item--federated.active{
  border-left:4px solid var(--federation-badge-color);
}

.cross-village-badge{
  align-items:center;
  background:var(--federation-badge-bg);
  border-radius:4px;
  color:var(--federation-badge-color);
  display:inline-flex;
  font-size:.625rem;
  font-weight:500;
  gap:.25rem;
  padding:.125rem .375rem;
  vertical-align:middle;
  white-space:nowrap;
}

.cross-village-badge--sm{
  font-size:.5625rem;
  padding:.0625rem .25rem;
}

.cross-village-badge--md{
  font-size:.75rem;
  padding:.1875rem .5rem;
}

.cross-village-badge--lg{
  font-size:.875rem;
  padding:.25rem .625rem;
}

.cross-village-badge__icon{
  flex-shrink:0;
}
.message-author-village{
  font-size:.625rem;
}
.message-author-village,.typing-village{
  color:var(--federation-badge-color);
  font-weight:500;
  margin-left:.25rem;
}
.typing-village{
  font-size:.75rem;
}
.chat-main{
  background-color:var(--color-bg-primary);
}

.chat-header{
  background-color:var(--color-bg-primary);
  border-bottom:1px solid var(--color-border-default);
  justify-content:space-between;
  min-height:var(--chat-header-height);
  padding:var(--spacing-4);
}

.chat-header,.chat-header-left{
  align-items:center;
  display:flex;
}

.chat-header-left{
  gap:var(--spacing-3);
}

.chat-header-title{
  color:var(--color-text-primary);
  font-size:var(--text-lg);
  font-weight:var(--font-weight-semibold);
}
.chat-header__toggle{
  background:none;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:none;
  min-height:44px;
  min-width:44px;
  padding:var(--spacing-2);
}

.chat-header__toggle:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.message{
  display:flex;
  gap:var(--spacing-3);
  max-width:80%;
}

.message-own{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.message-avatar{
  align-items:center;
  background-color:var(--color-primary-500);
  border-radius:var(--radius-full);
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-weight:var(--font-weight-semibold);
  height:2.5rem;
  justify-content:center;
  width:2.5rem;
}

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

.message-header{
  align-items:baseline;
  display:flex;
  gap:var(--spacing-2);
  margin-bottom:var(--spacing-1);
}

.message-author{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  font-weight:var(--font-weight-medium);
}

.message-time{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
}

.message-bubble{
  background-color:var(--color-gray-100);
  border-radius:var(--radius-lg);
  color:var(--color-text-primary);
  padding:var(--spacing-3) var(--spacing-4);
  word-wrap:break-word;
  line-height:var(--leading-relaxed);
  position:relative;
}

.message-own .message-bubble{
  background-color:var(--color-primary-600);
  color:#fff;
}

.message-bubble.message-pending{
  opacity:.6;
}

.message-bubble.message-pending:after{
  animation:pulse 1.5s infinite;
  bottom:4px;
  content:"...";
  font-size:var(--text-xs);
  position:absolute;
  right:8px;
}

.message-bubble.message-queued{
  border:1px dashed var(--color-warning-500);
  opacity:.7;
}

.message-bubble.message-queued:after{
  bottom:4px;
  color:var(--color-warning-700);
  content:"Queued";
  font-size:var(--text-xs);
  position:absolute;
  right:8px;
}
.message-bubble-wrapper{
  display:inline-block;
  max-width:100%;
  position:relative;
}
.message-hover-actions{
  background:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  display:flex;
  gap:var(--spacing-1);
  opacity:0;
  padding:var(--spacing-1);
  position:absolute;
  right:-8px;
  top:50%;
  transform:translate(100%, -50%);
  transition:opacity var(--transition-fast), visibility var(--transition-fast);
  visibility:hidden;
  z-index:10;
}
.message:focus-within .message-hover-actions,.message:hover .message-hover-actions{
  opacity:1;
  visibility:visible;
}
.message-own .message-hover-actions{
  left:-8px;
  right:auto;
  transform:translate(-100%, -50%);
}

.hover-action-btn{
  align-items:center;
  background:transparent;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  height:44px;
  justify-content:center;
  padding:0;
  transition:background-color var(--transition-fast), color var(--transition-fast);
  width:44px;
}

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

.hover-action-btn:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:1px;
}

.hover-action-btn--danger:hover{
  background-color:var(--color-danger-50);
  color:var(--color-danger);
}

.hover-action-btn svg{
  height:20px;
  width:20px;
}
@media (hover:none),(max-width:768px){
  .message-hover-actions{
    background:transparent;
    border:none;
    box-shadow:none;
    display:flex;
    margin-top:var(--spacing-1);
    opacity:1;
    padding:0;
    position:static;
    transform:none;
    visibility:visible;
  }

  .message-own .message-hover-actions{
    justify-content:flex-end;
  }

  .hover-action-btn{
    background-color:var(--color-bg-secondary);
  }
}

.message-edited{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  font-style:italic;
  margin-top:var(--spacing-1);
}
.message:not(.message-own){
  align-self:flex-start;
  margin-right:auto;
}

.message:not(.message-own) .message-bubble{
  background-color:var(--color-gray-100);
  border:1px solid var(--color-gray-200);
  border-bottom-left-radius:var(--radius-sm);
}
.message-own{
  margin-left:auto;
  margin-right:0;
}

.message-own .message-bubble{
  background:linear-gradient(135deg, var(--color-primary-500) 0, var(--color-primary-600) 100%);
  border-bottom-right-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.message-own .message-avatar{
  display:none;
}
.message-grouped{
  margin-top:var(--spacing-1);
}

.message-grouped .message-avatar{
  visibility:hidden;
  width:2.5rem;
}

.message-grouped .message-header{
  display:none;
}
.message-grouped:not(.message-own) .message-bubble{
  border-bottom-left-radius:var(--radius-sm);
  border-top-left-radius:var(--radius-sm);
}

.message-grouped.message-own .message-bubble{
  border-bottom-right-radius:var(--radius-sm);
  border-top-right-radius:var(--radius-sm);
}
.message-group-first:not(.message-own) .message-bubble{
  border-top-left-radius:var(--radius-lg);
}

.message-group-first.message-own .message-bubble{
  border-top-right-radius:var(--radius-lg);
}

.message-group-last.message-own .message-bubble,.message-group-last:not(.message-own) .message-bubble{
  border-bottom-left-radius:var(--radius-lg);
}
.date-separator{
  align-items:center;
  align-self:center;
  display:flex;
  justify-content:center;
  margin:var(--spacing-6) 0;
  max-width:100%;
  width:100%;
}

.date-separator:after,.date-separator:before{
  background-color:var(--color-border-default);
  content:"";
  flex:1;
  height:1px;
}

.date-separator-text{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
  letter-spacing:.05em;
  padding:0 var(--spacing-4);
  text-transform:uppercase;
  white-space:nowrap;
}
.message-system{
  align-self:center;
  display:flex;
  justify-content:center;
  margin:var(--spacing-3) 0;
  max-width:100%;
  padding:0;
}

.message-system .message-bubble{
  align-items:center;
  background-color:var(--color-bg-tertiary);
  border:none;
  border-radius:var(--radius-full);
  color:var(--color-text-secondary);
  display:inline-flex;
  font-size:var(--text-xs);
  font-style:normal;
  gap:var(--spacing-2);
  max-width:80%;
  padding:var(--spacing-1) var(--spacing-3);
}

.message-system .system-icon{
  flex-shrink:0;
  height:12px;
  opacity:.7;
  width:12px;
}

.message-system .system-message-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.message-system .message-avatar{
  display:none;
}
.message-footer{
  align-items:center;
  display:flex;
  gap:var(--spacing-1);
  justify-content:flex-end;
}

.delivery-status{
  align-items:center;
  display:inline-flex;
}

.delivery-icon{
  color:var(--color-text-tertiary);
  flex-shrink:0;
  height:14px;
  width:14px;
}
.delivery-status--sending .delivery-icon{
  animation:pulse 1.5s ease-in-out infinite;
  color:var(--color-text-tertiary);
}
.delivery-status--sent .delivery-icon{
  color:var(--color-text-tertiary);
}
.delivery-status--delivered .delivery-icon{
  color:var(--color-text-secondary);
}

.delivery-icon--read,.delivery-status--read .delivery-icon{
  color:var(--color-primary-500);
}
@media (prefers-reduced-motion:reduce){
  .delivery-status--sending .delivery-icon{
    animation:none;
    opacity:.7;
  }
}
.message-reactions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--spacing-1);
  margin-top:var(--spacing-2);
}

.reaction{
  align-items:center;
  background-color:var(--color-bg-secondary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-full);
  cursor:pointer;
  display:inline-flex;
  font-size:var(--text-sm);
  gap:4px;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:8px 12px;
  transition:all var(--transition-fast);
}

.reaction:hover{
  background-color:var(--color-gray-200);
  transform:scale(1.05);
}

.reaction.active{
  background-color:var(--color-primary-100);
  border-color:var(--color-primary-600);
}
.typing-indicator{
  align-items:center;
  display:flex;
  gap:var(--spacing-2);
  min-height:2.5rem;
  padding:var(--spacing-2) var(--spacing-4);
}

.typing-indicator:before{
  background-color:var(--color-bg-tertiary);
  border-radius:50%;
  content:"";
  display:block;
  flex-shrink:0;
  height:28px;
  width:28px;
}

#typingText{
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
  font-style:italic;
}

.typing-dots{
  align-items:center;
  background-color:var(--color-bg-secondary);
  border-radius:var(--radius-lg);
  display:inline-flex;
  gap:3px;
  margin-left:var(--spacing-1);
  padding:var(--spacing-2) var(--spacing-3);
}

.typing-dots span{
  animation:typing-bounce 1.4s infinite;
  background-color:var(--color-text-tertiary);
  border-radius:50%;
  height:7px;
  width:7px;
}

.typing-dots span:nth-child(2){
  animation-delay:.15s;
}

.typing-dots span:nth-child(3){
  animation-delay:.3s;
}

@keyframes typing-bounce{
  0%,60%,to{
    opacity:.4;
    transform:translateY(0);
  }
  30%{
    opacity:1;
    transform:translateY(-5px);
  }
}
@media (prefers-reduced-motion:reduce){
  .typing-dots span{
    animation:none;
    opacity:.6;
  }
}
.message-input-container{
  background-color:var(--color-bg-primary);
  border-top:1px solid var(--color-border-default);
  padding:var(--spacing-3) var(--spacing-4);
}

.message-input-wrapper{
  align-items:flex-end;
  display:flex;
  gap:var(--spacing-2);
  position:relative;
}

.message-input{
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  flex:1 1 0;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  max-height:var(--chat-input-max-height);
  min-height:var(--chat-input-min-height);
  min-width:0;
  padding:var(--spacing-3) var(--spacing-4);
  resize:none;
  transition:border-color var(--transition-fast);
}

.message-input:focus{
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
  outline:none;
}
.input-actions-toggle{
  align-items:center;
  background-color:var(--color-bg-secondary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-full);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  flex-shrink:0;
  height:40px;
  justify-content:center;
  padding:0;
  transition:all var(--transition-fast);
  width:40px;
}

.input-actions-toggle:hover{
  background-color:var(--color-bg-tertiary);
  color:var(--color-text-primary);
}

.input-actions-toggle[aria-expanded=true]{
  background-color:var(--color-primary-100);
  border-color:var(--color-primary-300);
  color:var(--color-primary-600);
}

.input-actions-toggle .plus-icon{
  transition:transform var(--transition-fast);
}

.input-actions-toggle[aria-expanded=true] .plus-icon{
  transform:rotate(45deg);
}
.input-actions-menu{
  align-items:center;
  animation:slideInLeft .15s ease-out;
  background-color:var(--color-bg-secondary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  display:none;
  gap:var(--spacing-1);
  padding:var(--spacing-1);
}

.input-actions-menu.expanded{
  display:flex;
}

@keyframes slideInLeft{
  0%{
    opacity:0;
    transform:translateX(-8px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

.input-actions-menu .btn-icon{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  height:36px;
  justify-content:center;
  padding:0;
  transition:all var(--transition-fast);
  width:36px;
}

.input-actions-menu .btn-icon:hover{
  background-color:var(--color-bg-tertiary);
  color:var(--color-text-primary);
}

.input-actions-menu .btn-icon:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
}

.input-actions-menu .voice-recorder-slot{
  align-items:center;
  display:flex;
}
@media (max-width:480px){
  .input-actions-toggle{
    height:36px;
    width:36px;
  }

  .input-actions-menu{
    bottom:100%;
    box-shadow:var(--shadow-lg);
    flex-direction:row;
    left:0;
    margin-bottom:var(--spacing-2);
    position:absolute;
  }

  .input-actions-menu .btn-icon{
    height:44px;
    width:44px;
  }
}
.btn-icon-only{
  align-items:center;
  border-radius:var(--radius-full);
  display:flex;
  flex-shrink:0;
  height:44px;
  justify-content:center;
  padding:0;
  width:44px;
}

.btn-icon-only svg{
  height:20px;
  width:20px;
}
.message-input-actions{
  display:flex;
  gap:var(--spacing-1);
}

.input-action-btn{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  height:44px;
  justify-content:center;
  padding:0;
  transition:all var(--transition-fast);
  width:44px;
}

.input-action-btn:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.input-action-btn svg{
  height:20px;
  width:20px;
}
.user-sidebar{
  background-color:var(--color-bg-primary);
  border-left:1px solid var(--color-border-default);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  width:var(--chat-context-width);
}

.user-sidebar-header{
  align-items:flex-start;
  border-bottom:1px solid var(--color-border-default);
  display:flex;
  gap:var(--spacing-2);
  justify-content:space-between;
  padding:var(--spacing-4);
}

.user-sidebar-title{
  color:var(--color-text-primary);
  font-size:var(--text-base);
  font-weight:var(--font-weight-semibold);
}

.user-count{
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
  margin-top:4px;
}

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

.user-item{
  align-items:center;
  display:flex;
  gap:var(--spacing-3);
  padding:var(--spacing-3) var(--spacing-4);
  position:relative;
  transition:background-color var(--transition-fast);
}

.user-item:hover{
  background-color:var(--color-bg-secondary);
}

.user-item:hover .dm-icon,.user-item:hover .video-call-icon{
  opacity:1;
}

.dm-icon,.video-call-icon{
  align-items:center;
  border:none;
  border-radius:var(--radius-full);
  color:#fff;
  cursor:pointer;
  display:flex;
  height:28px;
  justify-content:center;
  opacity:0;
  padding:0;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transition:opacity var(--transition-fast);
  width:28px;
}

.dm-icon{
  background-color:var(--color-primary-600);
  right:var(--spacing-3);
}

.video-call-icon{
  background-color:var(--color-success-600);
  right:calc(var(--spacing-3) + 32px);
}

.dm-icon:hover{
  background-color:var(--color-primary-700);
}

.video-call-icon:hover{
  background-color:var(--color-success-700);
}

.dm-icon svg,.video-call-icon svg{
  height:16px;
  width:16px;
}

.user-avatar{
  align-items:center;
  background-color:var(--color-secondary-500);
  border-radius:var(--radius-full);
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-size:var(--text-sm);
  font-weight:var(--font-weight-medium);
  height:2rem;
  justify-content:center;
  position:relative;
  width:2rem;
}

.user-avatar-img{
  border-radius:var(--radius-full);
  height:100%;
  object-fit:cover;
  width:100%;
}

.user-avatar-fallback{
  align-items:center;
  display:flex;
  height:100%;
  justify-content:center;
  width:100%;
}

.presence-dot{
  border:2px solid var(--color-bg-primary);
  border-radius:50%;
  bottom:-2px;
  height:10px;
  position:absolute;
  right:-2px;
  width:10px;
}

.presence-online{
  background-color:var(--color-success-500);
}

.presence-away{
  background-color:var(--color-warning-500);
}

.presence-offline{
  background-color:var(--color-gray-400);
}

.user-name{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  font-weight:var(--font-weight-medium);
}

.user-you{
  font-size:var(--text-xs);
}
.system-message,.user-you{
  color:var(--color-text-secondary);
}
.system-message{
  font-size:var(--text-sm);
  padding:var(--spacing-2);
  text-align:center;
}

.empty-state{
  align-items:center;
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:center;
  padding:var(--spacing-8);
  text-align:center;
}

.empty-state-icon{
  font-size:3rem;
  margin-bottom:var(--spacing-4);
  opacity:.5;
}

.empty-state-title{
  color:var(--color-text-primary);
  font-size:var(--text-xl);
  font-weight:var(--font-weight-semibold);
  margin-bottom:var(--spacing-2);
}

.empty-state-text{
  color:var(--color-text-secondary);
  font-size:var(--text-base);
}

.empty-state-content{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:var(--spacing-4);
}

.empty-state-content svg{
  color:var(--color-text-tertiary);
  opacity:.6;
}

.empty-state-content p{
  color:var(--color-text-secondary);
  font-size:var(--text-base);
  max-width:280px;
}
.connection-status{
  align-items:center;
  border-radius:var(--radius-full);
  display:inline-flex;
  font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
  gap:var(--spacing-2);
  padding:4px 12px;
}

.connection-status.connected{
  background-color:var(--color-success-50);
  color:var(--color-success-700);
}

.connection-status.disconnected{
  background-color:var(--color-error-50);
  color:var(--color-error-700);
}

.connection-status.connecting{
  background-color:var(--color-warning-50);
  color:var(--color-warning-700);
}

.status-dot{
  border-radius:50%;
  height:6px;
  width:6px;
}

.status-dot.connected{
  background-color:var(--color-success-500);
}

.status-dot.disconnected{
  background-color:var(--color-error-500);
}

.status-dot.connecting{
  animation:pulse 1.5s infinite;
  background-color:var(--color-warning-500);
}

@keyframes pulse{
  0%,to{ opacity:1; }
  50%{ opacity:.3; }
}
.message-attachment{
  align-items:center;
  background-color:hsla(0,0%,100%,.1);
  border-radius:var(--radius-md);
  display:flex;
  gap:var(--spacing-2);
  margin-top:var(--spacing-2);
  max-width:300px;
  padding:var(--spacing-2) var(--spacing-3);
}

.message-own .message-attachment{
  background-color:hsla(0,0%,100%,.15);
}

.attachment-icon{
  align-items:center;
  background-color:var(--color-gray-100);
  border-radius:var(--radius-md);
  display:flex;
  flex-shrink:0;
  height:36px;
  justify-content:center;
  width:36px;
}

.message-own .attachment-icon{
  background-color:hsla(0,0%,100%,.2);
}

.attachment-icon svg{
  color:var(--color-gray-600);
  height:20px;
  width:20px;
}

.message-own .attachment-icon svg{
  color:#fff;
}

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

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

.attachment-size{
  font-size:var(--text-xs);
  opacity:.7;
}

.attachment-preview{
  border-radius:var(--radius-md);
  cursor:pointer;
  margin-top:var(--spacing-2);
  max-width:300px;
  width:100%;
}

.attachment-download{
  border-radius:var(--radius-sm);
  color:inherit;
  flex-shrink:0;
  opacity:.7;
  padding:var(--spacing-1);
  transition:opacity var(--transition-fast);
}

.attachment-download:hover{
  opacity:1;
}
.file-upload-preview{
  background-color:var(--color-bg-secondary);
  border-radius:var(--radius-md);
  flex-wrap:wrap;
  margin-bottom:var(--spacing-2);
}

.file-preview-item,.file-upload-preview{
  display:flex;
  gap:var(--spacing-2);
  padding:var(--spacing-2);
}

.file-preview-item{
  align-items:center;
  background-color:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  position:relative;
}

.file-preview-remove{
  align-items:center;
  background-color:var(--color-error-500);
  border:none;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  display:flex;
  font-size:12px;
  height:18px;
  justify-content:center;
  line-height:1;
  position:absolute;
  right:-6px;
  top:-6px;
  width:18px;
}
.message-list::-webkit-scrollbar,.thread-list::-webkit-scrollbar,.user-list::-webkit-scrollbar{
  width:8px;
}

.message-list::-webkit-scrollbar-track,.thread-list::-webkit-scrollbar-track,.user-list::-webkit-scrollbar-track{
  background:var(--color-bg-secondary);
}

.message-list::-webkit-scrollbar-thumb,.thread-list::-webkit-scrollbar-thumb,.user-list::-webkit-scrollbar-thumb{
  background:var(--color-gray-300);
  border-radius:var(--radius-full);
}

.message-list::-webkit-scrollbar-thumb:hover,.thread-list::-webkit-scrollbar-thumb:hover,.user-list::-webkit-scrollbar-thumb:hover{
  background:var(--color-gray-400);
}
@media (max-width:767px){
  .chat-header__toggle{
    display:flex;
  }

  .message{
    max-width:90%;
  }
}
@media (min-width:768px){
  .thread-sidebar{
    box-shadow:none;
    max-width:none;
    position:static;
    visibility:visible;
    width:var(--chat-sidebar-width);
  }
  .chat-bottom-tabs{
    display:none;
  }
  .chat-panel--left{
    transform:none;
  }

  .chat-panel--center,.chat-panel--left{
    position:relative;
  }
}
@media (min-width:1024px){
  .user-sidebar{
    box-shadow:none;
    max-width:none;
    position:static;
    transition:width .2s ease,opacity .2s ease;
    visibility:visible;
    width:var(--chat-context-width);
  }
  .user-sidebar.collapsed{
    border-left:none;
    opacity:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
  }
  .desktop-users-toggle{
    display:flex;
  }
  .chat-panel--right{
    position:relative;
    transform:none;
  }

  .message{
    max-width:70%;
  }
}
.desktop-users-toggle{
  align-items:center;
  background-color:transparent;
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:none;
  gap:var(--spacing-1);
  padding:var(--spacing-1) var(--spacing-2);
  transition:all var(--transition-fast);
}

.desktop-users-toggle:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.desktop-users-toggle[aria-expanded=false]{
  background-color:var(--color-primary-50);
  border-color:var(--color-primary-200);
  color:var(--color-primary-600);
}

.desktop-users-toggle svg{
  flex-shrink:0;
}

.users-toggle-count{
  background-color:var(--color-success-100);
  border-radius:var(--radius-full);
  color:var(--color-success-700);
  font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
  min-width:18px;
  padding:0 var(--spacing-1);
  text-align:center;
}
@media (min-width:1280px){
  .message{
    max-width:60%;
  }
}
.chat-tab:focus-visible,.input-action-btn:focus-visible,.message:focus-visible,.thread-item:focus-visible,.user-item:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
}
.skip-to-chat{
  left:-9999px;
  position:absolute;
  z-index:100;
}

.skip-to-chat:focus{
  background-color:var(--color-primary-600);
  border-radius:var(--radius-md);
  color:#fff;
  left:var(--spacing-4);
  padding:var(--spacing-2) var(--spacing-4);
  text-decoration:none;
  top:var(--spacing-4);
}
.sr-only{
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  clip:rect(0, 0, 0, 0);
  border:0;
  white-space:nowrap;
}
.message-actions-menu{
  background-color:var(--color-bg-primary);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 20px rgba(0,0,0,.15), 0 0 0 1px var(--color-border-default);
  max-width:240px;
  min-width:180px;
  opacity:0;
  padding:var(--spacing-1) 0;
  position:fixed;
  transform:scale(.95);
  transform-origin:top left;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  visibility:hidden;
  z-index:1000;
}

.message-actions-menu.visible{
  opacity:1;
  transform:scale(1);
  visibility:visible;
}

.message-action-item{
  align-items:center;
  background:none;
  border:none;
  color:var(--color-text-primary);
  cursor:pointer;
  display:flex;
  font-size:var(--text-sm);
  gap:var(--spacing-3);
  padding:var(--spacing-3) var(--spacing-4);
  text-align:left;
  transition:background-color var(--transition-fast);
  width:100%;
}

.message-action-item:focus,.message-action-item:hover{
  background-color:var(--color-bg-secondary);
  outline:none;
}

.message-action-item:focus-visible{
  box-shadow:inset 0 0 0 2px var(--color-primary-500);
}

.message-action-item svg{
  color:var(--color-text-secondary);
  flex-shrink:0;
}

.message-action-item:focus svg,.message-action-item:hover svg{
  color:var(--color-text-primary);
}

.message-action-item.message-action-danger,.message-action-item.message-action-danger svg{
  color:var(--color-error-600);
}

.message-action-divider{
  background-color:var(--color-border-default);
  height:1px;
  margin:var(--spacing-1) 0;
}
.message-translate-btn{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  bottom:var(--spacing-2);
  color:var(--color-text-tertiary);
  cursor:pointer;
  opacity:0;
  padding:var(--spacing-1);
  position:absolute;
  right:var(--spacing-2);
  transition:opacity var(--transition-fast), color var(--transition-fast);
}

.message-bubble:focus-within .message-translate-btn,.message-bubble:hover .message-translate-btn{
  opacity:1;
}

.message-translate-btn:focus,.message-translate-btn:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-primary-600);
}

.message-translate-btn.translated{
  color:var(--color-success-600);
  opacity:1;
}

.message-translation{
  background-color:var(--color-bg-secondary);
  border-left:3px solid var(--color-primary-500);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  margin-top:var(--spacing-2);
  padding:var(--spacing-2);
}

.message-own .message-translation{
  background-color:hsla(0,0%,100%,.1);
  border-left-color:hsla(0,0%,100%,.5);
}

.translation-label{
  color:var(--color-text-tertiary);
  display:block;
  font-size:var(--text-xs);
  margin-bottom:var(--spacing-1);
}

.translation-text{
  display:block;
}
.delivery-status{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  margin-left:var(--spacing-1);
}

.message-own .delivery-status{
  color:hsla(0,0%,100%,.7);
}
@media (prefers-contrast:high){
  .message-bubble{
    border:1px solid;
  }

  .reaction{
    border-width:2px;
  }

  .message-actions-menu{
    border:2px solid var(--color-border-default);
  }
}
@media (prefers-reduced-motion:reduce){
  .chat-panel{
    transition:none;
  }

  .message-bubble.message-pending:after,.status-dot.connecting{
    animation:none;
  }
}
.chat-poll{
  background-color:var(--color-bg-secondary);
  border-radius:var(--radius-lg);
  margin:var(--spacing-2) 0;
  max-width:400px;
  padding:var(--spacing-4);
}

.chat-poll-header{
  gap:var(--spacing-2);
  margin-bottom:var(--spacing-3);
}

.chat-poll-header,.chat-poll-icon{
  align-items:center;
  display:flex;
}

.chat-poll-icon{
  background-color:var(--color-primary-100);
  border-radius:var(--radius-md);
  color:var(--color-primary-600);
  height:32px;
  justify-content:center;
  width:32px;
}

.chat-poll-meta{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
}

.chat-poll-label{
  color:var(--color-primary-600);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.chat-poll-author{
  color:#374151;
  font-size:var(--text-xs);
}

.chat-poll-menu-btn{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  padding:var(--spacing-1);
  transition:background-color var(--transition-fast);
}

.chat-poll-menu-btn:hover{
  background-color:var(--color-bg-tertiary);
}

.chat-poll-question{
  color:var(--color-text-primary);
  font-size:var(--text-base);
  font-weight:600;
  margin:0 0 var(--spacing-3) 0;
}

.chat-poll-options{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-2);
}

.chat-poll-option{
  background-color:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  cursor:pointer;
  padding:var(--spacing-3);
  position:relative;
  transition:border-color var(--transition-fast), background-color var(--transition-fast);
}

.chat-poll-option:hover:not(.disabled){
  border-color:var(--color-primary-400);
}

.chat-poll-option.selected{
  background-color:var(--color-primary-50);
  border-color:var(--color-primary-500);
}

.chat-poll-option.voted{
  border-color:var(--color-success-500);
}

.chat-poll-option.disabled{
  cursor:default;
}

.chat-poll-option-content{
  align-items:center;
  display:flex;
  gap:var(--spacing-2);
  position:relative;
  z-index:1;
}

.chat-poll-option-indicator{
  align-items:center;
  display:flex;
  flex-shrink:0;
  height:20px;
  justify-content:center;
  width:20px;
}

.chat-poll-radio{
  border:2px solid var(--color-border-default);
  border-radius:50%;
  height:16px;
  transition:border-color var(--transition-fast);
  width:16px;
}

.chat-poll-radio.checked{
  background-color:var(--color-primary-500);
  border-color:var(--color-primary-500);
  box-shadow:inset 0 0 0 3px var(--color-bg-primary);
}

.chat-poll-option-text{
  color:var(--color-text-primary);
  flex:1;
  font-size:var(--text-sm);
}

.chat-poll-option-percent{
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
  font-weight:600;
  min-width:40px;
  text-align:right;
}

.chat-poll-option-bar{
  background-color:var(--color-bg-tertiary);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  bottom:0;
  height:4px;
  left:0;
  overflow:hidden;
  position:absolute;
  right:0;
}

.chat-poll-option-fill{
  background-color:var(--color-primary-400);
  height:100%;
  transition:width var(--transition-normal);
}

.chat-poll-option-fill.user-vote{
  background-color:var(--color-success-500);
}

.chat-poll-option-count{
  bottom:var(--spacing-2);
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  position:absolute;
  right:var(--spacing-3);
}

.chat-poll-footer{
  align-items:center;
  border-top:1px solid var(--color-border-default);
  display:flex;
  justify-content:space-between;
  margin-top:var(--spacing-3);
  padding-top:var(--spacing-3);
}
.chat-poll-outcome{
  background-color:var(--color-bg-tertiary, #f3f4f6);
  border-left:3px solid var(--color-border-default);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  margin:var(--spacing-3) 0;
  padding:var(--spacing-2) var(--spacing-3);
}
.chat-poll-outcome-passed{
  background-color:rgba(16,185,129,.08);
  border-left-color:#10b981;
}
.chat-poll-outcome-no-quorum{
  background-color:rgba(245,158,11,.08);
  border-left-color:#f59e0b;
}
.chat-poll-outcome-blocked,.chat-poll-outcome-rejected{
  background-color:rgba(239,68,68,.08);
  border-left-color:#ef4444;
}
.chat-poll-outcome-no-votes{
  background-color:var(--color-bg-tertiary, #f3f4f6);
  border-left-color:var(--color-text-tertiary);
}

.chat-poll-votes{
  color:#374151;
  font-size:var(--text-sm);
}

.chat-poll-actions{
  display:flex;
  gap:var(--spacing-2);
}

.chat-poll-results-btn,.chat-poll-vote-btn{
  border-radius:var(--radius-md);
  cursor:pointer;
  font-size:var(--text-sm);
  font-weight:500;
  padding:var(--spacing-2) var(--spacing-3);
  transition:background-color var(--transition-fast);
}

.chat-poll-vote-btn{
  background-color:var(--color-primary-600);
  border:none;
  color:#fff;
}

.chat-poll-vote-btn:hover:not(:disabled){
  background-color:var(--color-primary-700);
}

.chat-poll-vote-btn:disabled{
  cursor:not-allowed;
  opacity:.5;
}

.chat-poll-results-btn{
  background:none;
  border:1px solid var(--color-border-default);
  color:var(--color-text-secondary);
}

.chat-poll-results-btn:hover{
  background-color:var(--color-bg-tertiary);
}
.chat-poll-close-btn{
  background:none;
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  color:var(--color-text-tertiary);
  cursor:pointer;
  font-size:var(--text-sm);
  font-weight:500;
  padding:var(--spacing-2) var(--spacing-3);
  transition:background-color var(--transition-fast), color var(--transition-fast);
}

.chat-poll-close-btn:hover{
  background-color:var(--color-bg-tertiary);
  color:var(--color-error-600);
}
@media (max-width:480px){
  .chat-poll{
    gap:var(--spacing-1);
    padding:var(--spacing-2);
  }
  .chat-poll-header{
    gap:var(--spacing-1);
    padding:0;
  }
  .chat-poll-icon,.chat-poll-icon svg{
    height:16px;
    width:16px;
  }
  .chat-poll-author,.chat-poll-label{
    font-size:var(--text-xs);
  }
  .chat-poll-question{
    font-size:var(--text-sm);
    line-height:1.3;
    margin:var(--spacing-1) 0;
  }
  .chat-poll-options{
    gap:var(--spacing-1);
  }
  .chat-poll-option{
    padding:var(--spacing-2);
  }
  .chat-poll-option-text{
    font-size:var(--text-xs);
    line-height:1.3;
  }
  .chat-poll-option-percent{
    font-size:var(--text-xs);
    min-width:32px;
  }
  .chat-poll-option-count{
    bottom:var(--spacing-1);
    font-size:10px;
    right:var(--spacing-2);
  }
  .chat-poll-footer{
    margin-top:var(--spacing-1);
    padding:0;
  }
  .chat-poll-votes{
    font-size:var(--text-xs);
  }
  .chat-poll-results-btn,.chat-poll-vote-btn{
    font-size:var(--text-xs);
    padding:var(--spacing-1) var(--spacing-2);
  }
}
.create-poll-modal{
  align-items:center;
  display:flex;
  inset:0;
  justify-content:center;
  opacity:0;
  position:fixed;
  transition:opacity var(--transition-normal), visibility var(--transition-normal);
  visibility:hidden;
  z-index:1000;
}

.create-poll-modal.visible{
  opacity:1;
  visibility:visible;
}

.create-poll-backdrop{
  background-color:rgba(0,0,0,.5);
  inset:0;
  position:absolute;
}

.create-poll-content{
  background-color:var(--color-bg-primary);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  max-height:90vh;
  max-width:480px;
  overflow-y:auto;
  position:relative;
  transform:scale(.95);
  transition:transform var(--transition-normal);
  width:90%;
}

.create-poll-modal.visible .create-poll-content{
  transform:scale(1);
}

.create-poll-header{
  align-items:center;
  border-bottom:1px solid var(--color-border-default);
  display:flex;
  justify-content:space-between;
  padding:var(--spacing-4);
}

.create-poll-header h2{
  color:var(--color-text-primary);
  font-size:var(--text-lg);
  font-weight:600;
  margin:0;
}

.create-poll-close{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  padding:var(--spacing-1);
  transition:background-color var(--transition-fast);
}

.create-poll-close:hover{
  background-color:var(--color-bg-secondary);
}

.create-poll-form{
  padding:var(--spacing-4);
}

.create-poll-field{
  margin-bottom:var(--spacing-4);
}

.create-poll-field>label{
  color:var(--color-text-secondary);
  display:block;
  font-size:var(--text-sm);
  font-weight:500;
  margin-bottom:var(--spacing-2);
}

.poll-question-header{
  align-items:center;
  display:flex;
  gap:var(--spacing-2);
  justify-content:space-between;
  margin-bottom:var(--spacing-2);
}

.poll-question-header>label{
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
  font-weight:500;
  margin-bottom:0;
}

.poll-question-header-actions,.poll-reset-btn,.poll-suggest-btn{
  align-items:center;
  display:inline-flex;
  gap:var(--spacing-1);
}

.poll-reset-btn,.poll-suggest-btn{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:var(--text-xs);
  padding:var(--spacing-1) var(--spacing-2);
  transition:background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.poll-reset-btn{
  color:var(--color-text-tertiary);
}

.poll-reset-btn:hover{
  background-color:var(--color-bg-tertiary);
  color:var(--color-text-primary);
}

.poll-suggest-btn{
  color:var(--color-primary-600);
  font-weight:500;
}

.poll-suggest-btn:hover:not(:disabled){
  background-color:var(--color-primary-50);
}

.poll-suggest-btn:disabled{
  color:var(--color-text-tertiary);
  cursor:not-allowed;
  opacity:.7;
}

.poll-suggest-btn[aria-busy=true]{
  cursor:progress;
  opacity:.7;
}

.poll-reset-btn:focus-visible,.poll-suggest-btn:focus-visible{
  outline:2px solid var(--color-primary-400);
  outline-offset:2px;
}

.poll-duration-select,.poll-option-input,.poll-question-input,.poll-vote-type-select{
  background-color:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  color:var(--color-text-primary);
  font-size:var(--text-base);
  padding:var(--spacing-3);
  transition:border-color var(--transition-fast);
  width:100%;
}

.poll-vote-type-hint{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  line-height:1.4;
  margin:var(--spacing-1) 0 0 0;
}
textarea.poll-question-input{
  font-family:inherit;
  line-height:1.4;
  max-height:8em;
  min-height:calc(2.8em + var(--spacing-3)*2);
  overflow-y:auto;
  resize:vertical;
}

.poll-duration-select:focus,.poll-option-input:focus,.poll-question-input:focus{
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px var(--color-primary-100);
  outline:none;
}

.poll-char-count{
  color:var(--color-text-tertiary);
  display:block;
  font-size:var(--text-xs);
  margin-top:var(--spacing-1);
  text-align:right;
}

.poll-options-list{
  flex-direction:column;
  margin-bottom:var(--spacing-2);
}

.poll-option-row,.poll-options-list{
  display:flex;
  gap:var(--spacing-2);
}

.poll-option-row{
  align-items:center;
}

.poll-option-number{
  color:var(--color-text-tertiary);
  font-size:var(--text-sm);
  width:20px;
}

.poll-option-row .poll-option-input{
  flex:1;
}

.poll-remove-option{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  padding:var(--spacing-1);
  transition:color var(--transition-fast);
}

.poll-remove-option:hover{
  color:var(--color-error-600);
}

.poll-add-option-btn{
  align-items:center;
  background:none;
  border:1px dashed var(--color-border-default);
  border-radius:var(--radius-md);
  color:var(--color-primary-600);
  cursor:pointer;
  display:flex;
  font-size:var(--text-sm);
  gap:var(--spacing-1);
  padding:var(--spacing-2);
  transition:border-color var(--transition-fast), background-color var(--transition-fast);
}

.poll-add-option-btn:hover:not(:disabled){
  background-color:var(--color-primary-50);
  border-color:var(--color-primary-400);
}

.poll-add-option-btn:disabled{
  cursor:not-allowed;
  opacity:.5;
}

.poll-settings{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-2);
}

.poll-setting-checkbox{
  align-items:center;
  color:var(--color-text-primary);
  cursor:pointer;
  display:flex;
  font-size:var(--text-sm);
  gap:var(--spacing-2);
}

.poll-setting-checkbox input[type=checkbox]{
  accent-color:var(--color-primary-600);
  height:18px;
  width:18px;
}

.poll-duration-select{
  max-width:200px;
}

.create-poll-actions{
  border-top:1px solid var(--color-border-default);
  display:flex;
  gap:var(--spacing-3);
  justify-content:flex-end;
  padding-top:var(--spacing-4);
}

.poll-cancel-btn,.poll-submit-btn{
  border-radius:var(--radius-md);
  cursor:pointer;
  font-size:var(--text-sm);
  font-weight:500;
  padding:var(--spacing-2) var(--spacing-4);
  transition:background-color var(--transition-fast);
}

.poll-cancel-btn{
  background:none;
  border:1px solid var(--color-border-default);
  color:var(--color-text-secondary);
}

.poll-cancel-btn:hover{
  background-color:var(--color-bg-secondary);
}

.poll-submit-btn{
  background-color:var(--color-primary-600);
  border:none;
  color:#fff;
}

.poll-submit-btn:hover:not(:disabled){
  background-color:var(--color-primary-700);
}

.poll-submit-btn:disabled{
  cursor:not-allowed;
  opacity:.5;
}
@media (max-width:480px){
  .create-poll-content{
    border-radius:0;
    height:100%;
    max-height:100%;
    width:100%;
  }

  .create-poll-actions{
    flex-direction:column;
  }

  .poll-cancel-btn,.poll-submit-btn{
    padding:var(--spacing-3);
    width:100%;
  }
}
.translation-inline-btn{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  display:flex;
  justify-content:center;
  padding:var(--spacing-1);
  transition:color var(--transition-fast), background-color var(--transition-fast);
}

.translation-inline-btn:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-primary-600);
}

.translation-inline-btn.translated{
  color:var(--color-success-600);
}

.translation-inline-btn.loading{
  pointer-events:none;
}

.translation-inline-btn .translation-spinner{
  animation:spin 1s linear infinite;
}
.voice-stack{
  background-color:var(--color-bg-secondary);
  border-radius:var(--radius-lg);
  margin:var(--spacing-2) 0;
  max-width:400px;
  padding:var(--spacing-3);
}

.voice-stack-header{
  align-items:center;
  cursor:pointer;
  display:flex;
  gap:var(--spacing-2);
  padding-bottom:var(--spacing-2);
}

.voice-stack-icon{
  align-items:center;
  background-color:var(--color-primary-100);
  border-radius:50%;
  color:var(--color-primary-600);
  display:flex;
  flex-shrink:0;
  height:36px;
  justify-content:center;
  width:36px;
}

.voice-stack-meta{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
}

.voice-stack-title{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  font-weight:600;
}

.voice-stack-info{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
}

.voice-stack-expand-btn{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  padding:var(--spacing-1);
  transition:transform var(--transition-fast);
}

.voice-stack-expand-btn.expanded{
  transform:rotate(180deg);
}

.voice-stack-expand-btn:hover{
  background-color:var(--color-bg-tertiary);
}

.voice-stack-messages{
  border-top:1px solid var(--color-border-default);
  display:none;
  flex-direction:column;
  gap:var(--spacing-1);
  margin-top:var(--spacing-2);
  padding:var(--spacing-2) 0;
}

.voice-stack-messages.expanded{
  display:flex;
}

.voice-stack-message{
  align-items:center;
  display:flex;
  gap:var(--spacing-2);
  padding:var(--spacing-1) 0;
  position:relative;
}

.voice-stack-message.playing{
  background-color:var(--color-primary-50);
  border-radius:var(--radius-sm);
  margin:0 calc(var(--spacing-2)*-1);
  padding:var(--spacing-1) var(--spacing-2);
}

.voice-stack-connector{
  color:var(--color-text-tertiary);
  flex-shrink:0;
  font-family:monospace;
  width:16px;
}

.voice-stack-message-content{
  align-items:center;
  display:flex;
  flex:1;
  gap:var(--spacing-2);
}

.voice-stack-sender{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  font-weight:500;
}

.voice-stack-duration{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
}

.voice-stack-message-play{
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-primary-600);
  cursor:pointer;
  opacity:0;
  padding:var(--spacing-1);
  transition:opacity var(--transition-fast);
}

.voice-stack-message:hover .voice-stack-message-play{
  opacity:1;
}

.voice-stack-message-play:hover{
  background-color:var(--color-primary-100);
}

.voice-stack-progress{
  background-color:var(--color-bg-tertiary);
  border-radius:1px;
  bottom:0;
  height:2px;
  left:24px;
  overflow:hidden;
  position:absolute;
  right:0;
}

.voice-stack-progress-bar{
  background-color:var(--color-primary-500);
  height:100%;
  transition:width .1s linear;
  width:0;
}

.voice-stack-actions{
  border-top:1px solid var(--color-border-default);
  display:flex;
  gap:var(--spacing-2);
  margin-top:var(--spacing-2);
  padding-top:var(--spacing-2);
}

.voice-stack-play-all,.voice-stack-reply,.voice-stack-summary{
  align-items:center;
  border-radius:var(--radius-md);
  cursor:pointer;
  display:flex;
  font-size:var(--text-xs);
  font-weight:500;
  gap:var(--spacing-1);
  padding:var(--spacing-2) var(--spacing-3);
  transition:background-color var(--transition-fast);
}

.voice-stack-play-all{
  background-color:var(--color-primary-600);
  border:none;
  color:#fff;
}

.voice-stack-play-all:hover{
  background-color:var(--color-primary-700);
}

.voice-stack-play-all.playing{
  background-color:var(--color-error-600);
}

.voice-stack-play-all.playing:hover{
  background-color:var(--color-error-700);
}

.voice-stack-reply,.voice-stack-summary{
  background:none;
  border:1px solid var(--color-border-default);
  color:var(--color-text-secondary);
}

.voice-stack-reply:hover,.voice-stack-summary:hover{
  background-color:var(--color-bg-tertiary);
}

.emoji-picker{
  animation:emoji-picker-in .15s ease-out;
  background:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  max-width:320px;
  min-width:280px;
  padding:8px;
  position:fixed;
  z-index:10000;
}

@keyframes emoji-picker-in{
  0%{
    opacity:0;
    transform:scale(.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.emoji-picker-quick{
  border-bottom:1px solid var(--color-border-default);
  display:grid;
  gap:4px;
  grid-template-columns:repeat(8, 1fr);
  padding-bottom:8px;
}

.emoji-btn{
  align-items:center;
  background:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  font-size:1.4rem;
  height:36px;
  justify-content:center;
  transition:all .15s ease;
  width:36px;
}

.emoji-btn:hover{
  background-color:var(--color-bg-secondary);
  transform:scale(1.15);
}

.emoji-btn:focus{
  box-shadow:0 0 0 2px var(--color-primary-500);
  outline:none;
}

.emoji-btn:active{
  transform:scale(.95);
}

.emoji-picker-more{
  background:none;
  border:none;
  border-radius:6px;
  color:var(--color-text-secondary);
  cursor:pointer;
  display:block;
  font-size:var(--text-sm);
  margin-top:4px;
  padding:8px;
  transition:background-color .15s ease;
  width:100%;
}

.emoji-picker-more:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.emoji-picker-expanded{
  border-top:1px solid var(--color-border-default);
  margin-top:8px;
  padding-top:8px;
}

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

.emoji-picker-section:last-child{
  margin-bottom:0;
}

.emoji-picker-label{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:6px;
  padding-left:4px;
  text-transform:uppercase;
}

.emoji-picker-grid{
  display:grid;
  gap:4px;
  grid-template-columns:repeat(8, 1fr);
}
@media (max-width:480px){
  .emoji-picker{
    max-width:calc(100vw - 20px);
    min-width:260px;
  }

  .emoji-picker-grid,.emoji-picker-quick{
    grid-template-columns:repeat(6, 1fr);
  }

  .emoji-btn{
    font-size:1.5rem;
    height:40px;
    width:40px;
  }
}
@media (prefers-color-scheme:dark){
  .emoji-picker{
    box-shadow:0 8px 32px rgba(0,0,0,.4);
  }
  .message-bubble{
    background-color:#374151;
    color:#f3f4f6;
  }

  .message-own .message-bubble{
    background-color:var(--color-primary-600);
    color:#fff;
  }
}

.message-search-panel{
  background:var(--color-bg-primary);
  border-left:1px solid var(--color-border-default);
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
  height:var(--app-height);
  max-width:100vw;
  padding-bottom:var(--safe-area-bottom);
  padding-top:var(--safe-area-top);
  position:fixed;
  right:-400px;
  top:0;
  transition:right .2s ease-out;
  width:min(400px, 100vw);
  z-index:9999;
}

.message-search-panel.open{
  right:0;
}
@media (max-width:480px){
  .message-search-panel{
    border-left:none;
    right:-100vw;
    width:100vw;
  }
}

.message-search-header{
  align-items:center;
  background:var(--color-bg-secondary);
  border-bottom:1px solid var(--color-border-default);
  display:flex;
  gap:12px;
  padding:16px;
}

.message-search-input-wrapper{
  align-items:center;
  background:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:8px;
  display:flex;
  flex:1;
  gap:8px;
  padding:8px 12px;
  transition:border-color .15s ease;
}

.message-search-input-wrapper:focus-within{
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px rgba(20,184,166,.1);
}

.message-search-icon{
  color:var(--color-text-tertiary);
  flex-shrink:0;
}

.message-search-input{
  background:none;
  border:none;
  color:var(--color-text-primary);
  flex:1;
  font-size:var(--text-base);
  outline:none;
}

.message-search-input::placeholder{
  color:var(--color-text-tertiary);
}

.message-search-clear{
  align-items:center;
  background:none;
  border:none;
  border-radius:4px;
  color:var(--color-text-tertiary);
  cursor:pointer;
  display:flex;
  height:24px;
  justify-content:center;
  padding:0;
  transition:all .15s ease;
  width:24px;
}

.message-search-clear:hover{
  background:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.message-search-close{
  align-items:center;
  background:none;
  border:none;
  border-radius:8px;
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  height:40px;
  justify-content:center;
  padding:0;
  transition:all .15s ease;
  width:40px;
}

.message-search-close:hover{
  background:var(--color-bg-tertiary);
  color:var(--color-text-primary);
}

.message-search-results{
  flex:1;
  overflow-y:auto;
  padding:8px;
}

.message-search-empty,.message-search-loading{
  align-items:center;
  color:var(--color-text-tertiary);
  display:flex;
  flex-direction:column;
  height:200px;
  justify-content:center;
  padding:20px;
  text-align:center;
}

.message-search-error{
  color:var(--color-error-600);
}

.message-search-spinner{
  animation:spin .8s linear infinite;
  border:2px solid var(--color-border-default);
  border-radius:50%;
  border-top-color:var(--color-primary-500);
  height:24px;
  margin-bottom:12px;
  width:24px;
}

@keyframes spin{
  to{ transform:rotate(1turn); }
}

.message-search-result{
  border-radius:8px;
  cursor:pointer;
  margin-bottom:4px;
  padding:12px;
  transition:background-color .15s ease;
}

.message-search-result.selected,.message-search-result:hover{
  background:var(--color-bg-secondary);
}

.message-search-result:focus{
  box-shadow:0 0 0 2px var(--color-primary-500);
  outline:none;
}

.message-search-result-header{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:4px;
}

.message-search-result-author{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  font-weight:600;
}

.message-search-result-time{
  color:var(--color-text-tertiary);
  font-size:var(--text-xs);
}

.message-search-result-content{
  color:var(--color-text-secondary);
  display:-webkit-box;
  font-size:var(--text-sm);
  -webkit-line-clamp:2;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
}

.message-search-result-content mark{
  background:var(--color-warning-200);
  border-radius:2px;
  color:var(--color-text-primary);
  padding:0 2px;
}
.chat-search-btn{
  align-items:center;
  background:none;
  border:none;
  border-radius:8px;
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  height:36px;
  justify-content:center;
  padding:0;
  transition:all .15s ease;
  width:36px;
}

.chat-search-btn:hover{
  background:var(--color-bg-secondary);
  color:var(--color-text-primary);
}
@media (max-width:480px){
  .message-search-panel{
    right:-100vw;
    width:100vw;
  }
}
.message-highlight{
  animation:message-highlight 2s ease-out;
}

@keyframes message-highlight{
  0%{
    background-color:var(--color-warning-100);
    box-shadow:0 0 0 4px var(--color-warning-200);
  }
  to{
    background-color:transparent;
    box-shadow:none;
  }
}
.reply-preview{
  align-items:stretch;
  background-color:var(--color-bg-secondary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  display:flex;
  gap:var(--spacing-3);
  margin-bottom:var(--spacing-2);
  padding:var(--spacing-3);
}

.reply-preview-indicator{
  background-color:var(--color-primary-500);
  border-radius:2px;
  flex-shrink:0;
  width:4px;
}

.reply-preview-content{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.reply-preview-author{
  color:var(--color-text-secondary);
  font-size:var(--text-xs);
}

.reply-preview-author strong{
  color:var(--color-primary-600);
}

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

.reply-preview-cancel{
  align-items:center;
  align-self:center;
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  display:flex;
  flex-shrink:0;
  height:28px;
  justify-content:center;
  padding:0;
  transition:all .15s ease;
  width:28px;
}

.reply-preview-cancel:hover{
  color:var(--color-text-primary);
}
.quoted-reply,.reply-preview-cancel:hover{
  background-color:var(--color-bg-tertiary);
}
.quoted-reply{
  align-items:stretch;
  border-radius:var(--radius-sm);
  cursor:pointer;
  display:flex;
  font-size:var(--text-sm);
  gap:var(--spacing-2);
  margin-bottom:var(--spacing-2);
  max-width:100%;
  overflow:hidden;
  padding:var(--spacing-2);
  transition:background-color .15s ease;
}

.quoted-reply:hover{
  background-color:var(--color-bg-secondary);
}

.quoted-reply-indicator{
  background-color:var(--color-primary-400);
  border-radius:1.5px;
  flex-shrink:0;
  width:3px;
}

.quoted-reply-content{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.quoted-reply-author{
  color:var(--color-primary-600);
  font-size:var(--text-xs);
  font-weight:600;
}

.quoted-reply-text{
  color:var(--color-text-secondary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.quoted-reply-minimal{
  opacity:.7;
}

.quoted-reply-minimal .quoted-reply-indicator{
  background-color:var(--color-text-tertiary);
}
.message-own .quoted-reply{
  background-color:hsla(0,0%,100%,.15);
}

.message-own .quoted-reply:hover{
  background-color:hsla(0,0%,100%,.25);
}

.message-own .quoted-reply-indicator{
  background-color:hsla(0,0%,100%,.6);
}

.message-own .quoted-reply-author{
  color:hsla(0,0%,100%,.9);
}

.message-own .quoted-reply-text{
  color:hsla(0,0%,100%,.8);
}
@media (max-width:480px){
  .reply-preview{
    padding:var(--spacing-2);
  }

  .quoted-reply{
    padding:var(--spacing-1) var(--spacing-2);
  }
}
.report-dialog-overlay{
  align-items:center;
  animation:fade-in .15s ease-out;
  background-color:rgba(0,0,0,.5);
  display:flex;
  inset:0;
  justify-content:center;
  padding:var(--spacing-4);
  position:fixed;
  z-index:10000;
}

@keyframes fade-in{
  0%{ opacity:0; }
  to{ opacity:1; }
}

.report-dialog{
  animation:scale-in .15s ease-out;
  background-color:var(--color-bg-primary);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  max-height:90vh;
  max-width:400px;
  overflow-y:auto;
  width:100%;
}

@keyframes scale-in{
  0%{ opacity:0; transform:scale(.95); }
  to{ opacity:1; transform:scale(1); }
}

.report-dialog-header{
  align-items:center;
  border-bottom:1px solid var(--color-border-default);
  display:flex;
  justify-content:space-between;
  padding:var(--spacing-4);
}

.report-dialog-header h3{
  color:var(--color-text-primary);
  font-size:var(--text-lg);
  font-weight:600;
  margin:0;
}

.report-dialog-close{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  display:flex;
  font-size:1.5rem;
  height:32px;
  justify-content:center;
  padding:0;
  transition:all .15s ease;
  width:32px;
}

.report-dialog-close:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}

.report-dialog-content{
  padding:var(--spacing-4);
}

.report-dialog-content p{
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
  margin:0 0 var(--spacing-3) 0;
}

.report-reasons{
  flex-direction:column;
}

.report-reason,.report-reasons{
  display:flex;
  gap:var(--spacing-2);
}

.report-reason{
  align-items:center;
  background-color:var(--color-bg-secondary);
  border-radius:var(--radius-md);
  cursor:pointer;
  padding:var(--spacing-2) var(--spacing-3);
  transition:background-color .15s ease;
}

.report-reason:hover{
  background-color:var(--color-bg-tertiary);
}

.report-reason input[type=radio]{
  accent-color:var(--color-primary-600);
  cursor:pointer;
  height:18px;
  width:18px;
}

.report-reason span{
  color:var(--color-text-primary);
  font-size:var(--text-sm);
}

.report-other-container{
  margin-top:var(--spacing-3);
}

.report-other-input{
  background-color:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  color:var(--color-text-primary);
  font-size:var(--text-sm);
  padding:var(--spacing-3);
  resize:vertical;
  transition:border-color .15s ease;
  width:100%;
}

.report-other-input:focus{
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px var(--color-primary-100);
  outline:none;
}

.report-dialog-actions{
  border-top:1px solid var(--color-border-default);
  display:flex;
  gap:var(--spacing-3);
  justify-content:flex-end;
  padding:var(--spacing-4);
}

.report-cancel-btn,.report-submit-btn{
  border-radius:var(--radius-md);
  cursor:pointer;
  font-size:var(--text-sm);
  font-weight:500;
  padding:var(--spacing-2) var(--spacing-4);
  transition:all .15s ease;
}

.report-cancel-btn{
  background:none;
  border:1px solid var(--color-border-default);
  color:var(--color-text-secondary);
}

.report-cancel-btn:hover{
  background-color:var(--color-bg-secondary);
}

.report-submit-btn{
  background-color:var(--color-error-600);
  border:none;
  color:#fff;
}

.report-submit-btn:hover{
  background-color:var(--color-error-700);
}
@media (max-width:480px){
  .report-dialog{
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    bottom:0;
    left:0;
    max-height:80vh;
    max-width:100%;
    position:fixed;
    right:0;
  }

  .report-dialog-actions{
    flex-direction:column;
  }

  .report-cancel-btn,.report-submit-btn{
    padding:var(--spacing-3);
    width:100%;
  }
}
.pinned-messages-panel{
  background-color:var(--color-bg-secondary);
  border-bottom:1px solid var(--color-border-default);
}

.pinned-messages-toggle{
  align-items:center;
  background:none;
  border:none;
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  font-size:var(--text-sm);
  gap:var(--spacing-2);
  padding:var(--spacing-2) var(--spacing-4);
  transition:background-color var(--transition-fast);
  width:100%;
}

.pinned-messages-toggle:hover{
  background-color:var(--color-bg-tertiary);
}

.pinned-messages-toggle:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
}

.pinned-messages-toggle .pin-icon{
  color:var(--color-warning-500);
}

.pinned-messages-toggle .pinned-count{
  color:var(--color-text-primary);
  font-weight:var(--font-weight-semibold);
}

.pinned-messages-toggle .chevron-icon{
  margin-left:auto;
  transition:transform var(--transition-fast);
}

.pinned-messages-toggle[aria-expanded=true] .chevron-icon{
  transform:rotate(180deg);
}

.pinned-messages-list{
  display:none;
  max-height:200px;
  overflow-y:auto;
  padding:var(--spacing-2) var(--spacing-4);
}

.pinned-messages-list.expanded{
  display:block;
}

.pinned-empty{
  color:var(--color-text-tertiary);
  font-size:var(--text-sm);
  padding:var(--spacing-4);
  text-align:center;
}

.pinned-message-item{
  background-color:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  gap:var(--spacing-1);
  margin-bottom:var(--spacing-2);
  padding:var(--spacing-2) var(--spacing-3);
}

.pinned-message-item:last-child{
  margin-bottom:0;
}

.pinned-message-header{
  align-items:center;
  display:flex;
  font-size:var(--text-xs);
  justify-content:space-between;
}

.pinned-author{
  color:var(--color-text-primary);
  font-weight:var(--font-weight-semibold);
}

.pinned-time{
  color:var(--color-text-tertiary);
}

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

.pinned-message-actions{
  display:flex;
  gap:var(--spacing-1);
  justify-content:flex-end;
  margin-top:var(--spacing-1);
}

.pinned-message-actions .btn-xs{
  font-size:var(--text-xs);
  padding:var(--spacing-1);
}

.pinned-message-actions .btn-xs:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:1px;
}
.pin-indicator{
  align-items:center;
  background-color:var(--color-warning-50);
  border-radius:var(--radius-sm);
  color:var(--color-warning-600);
  display:flex;
  font-size:var(--text-xs);
  gap:var(--spacing-1);
  margin-bottom:var(--spacing-2);
  padding:var(--spacing-1) var(--spacing-2);
}

.message-pinned{
  border-left:3px solid var(--color-warning-500);
}
.message-highlight{
  animation:highlightPulse 2s ease-out;
}

@keyframes highlightPulse{
  0%{
    background-color:var(--color-warning-100);
  }
  to{
    background-color:transparent;
  }
}
@media (max-width:767px){
  .message-input-container{
    padding:var(--spacing-2) var(--spacing-3);
  }

  .message-input-wrapper{
    flex-wrap:nowrap;
    gap:var(--spacing-2);
  }

  .message-input{
    flex:1 1 0%;
    font-size:var(--text-base);
    min-width:0;
    padding:var(--spacing-2) var(--spacing-3);
    width:100%;
  }
  .input-actions-toggle{
    height:36px;
    width:36px;
  }

  .input-actions-menu{
    padding:var(--spacing-1);
  }

  .input-actions-menu .btn-icon{
    height:32px;
    width:32px;
  }
  .btn-icon-only{
    height:36px;
    width:36px;
  }
  .message-input-wrapper .btn{
    flex-shrink:0;
    height:40px;
    min-width:40px;
    padding:0;
    width:40px;
  }

  .message-input-wrapper .btn-ghost{
    height:36px;
    min-width:36px;
    width:36px;
  }
}
@media (max-width:360px){
  .input-actions-menu .btn-icon{
    height:28px;
    width:28px;
  }
}
@media (prefers-color-scheme:dark){
  .pin-indicator{
    background-color:rgba(234,179,8,.1);
    color:var(--color-warning-400);
  }

  .message-highlight{
    animation:highlightPulseDark 2s ease-out;
  }

  @keyframes highlightPulseDark{
    0%{
      background-color:rgba(234,179,8,.2);
    }
    to{
      background-color:transparent;
    }
  }
}
.thread-sidebar-search-row{
  align-items:center;
  display:flex;
  gap:var(--spacing-2);
}

.thread-sidebar-search-row .thread-search-wrapper{
  flex:1;
}
.compose-btn{
  border-radius:50%;
  flex-shrink:0;
  height:44px;
  width:44px;
}
.mobile-only{
  display:none;
}

@media (max-width:767px){
  .mobile-only{
    display:flex;
  }
}
.online-users-compact{
  background:var(--color-bg-secondary);
  border-top:1px solid var(--color-border-default);
  margin-top:auto;
  padding:var(--spacing-3);
}

.online-users-compact-header{
  align-items:center;
  color:var(--color-text-secondary);
  display:flex;
  font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
  gap:var(--spacing-2);
  margin-bottom:var(--spacing-2);
}

.online-users-compact-count{
  color:var(--color-text-muted);
}

.online-users-compact-avatars{
  display:flex;
  flex-wrap:wrap;
  gap:var(--spacing-2);
  max-height:80px;
  overflow-y:auto;
}

.online-avatar{
  background-color:var(--color-bg-tertiary);
  background-position:50%;
  background-size:cover;
  border-radius:50%;
  cursor:pointer;
  height:32px;
  position:relative;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
  width:32px;
}

.online-avatar:hover{
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transform:scale(1.1);
}

.online-avatar:focus-visible{
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
}
.online-avatar:after{
  background:var(--color-success-500);
  border:2px solid var(--color-bg-secondary);
  border-radius:50%;
  bottom:0;
  content:"";
  height:10px;
  position:absolute;
  right:0;
  width:10px;
}
.online-overflow{
  align-items:center;
  background:var(--color-bg-tertiary);
  border-radius:50%;
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  font-size:var(--text-xs);
  height:32px;
  justify-content:center;
  width:32px;
}

.online-overflow:hover{
  background:var(--color-bg-secondary);
}
.federated-users-section{
  background:linear-gradient(135deg, rgba(99,102,241,.08), transparent);
  border-bottom:2px solid var(--color-primary-200);
  border-radius:var(--radius-md);
  margin-bottom:var(--spacing-2);
  margin-left:var(--spacing-2);
  margin-right:var(--spacing-2);
  padding:var(--spacing-2);
}

.online-users-compact-header.federated{
  color:var(--color-primary-600);
  font-weight:600;
}

.online-users-compact-header.federated:before{
  content:"🔗 ";
  font-size:.85em;
}
.online-avatar.federated{
  border:2px solid var(--color-primary-400);
}

.online-avatar.federated:hover{
  border-color:var(--color-primary-500);
}
.online-avatar.federated:after{
  background:var(--color-primary-400);
  border-color:var(--color-bg-secondary);
}

.online-overflow.federated{
  background:transparent;
  border:2px dashed var(--color-primary-400);
  color:var(--color-primary-500);
}
#help-chat-widget{
  display:none !important;
}
.chat-more-menu.show{
  display:block;
}

.chat-more-menu-item{
  padding:var(--spacing-2) var(--spacing-3);
  transition:background-color var(--transition-fast);
}

.chat-more-menu-item:hover{
  background-color:var(--color-bg-secondary);
}
.chat-header-right{
  align-items:center;
  display:flex;
  gap:var(--spacing-1);
  position:relative;
}
.btn-icon-only.btn-ghost{
  background:transparent;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  padding:var(--spacing-2);
}

.btn-icon-only.btn-ghost:hover{
  background-color:var(--color-bg-secondary);
  color:var(--color-text-primary);
}
@media (min-width:768px){

  .thread-sidebar{
    position:relative;
    transform:none !important;
  }

  .thread-sidebar[aria-hidden=true]{
    display:flex !important;
  }

  .thread-sidebar[inert]{
    pointer-events:auto;
  }
  .mobile-panel-btn{
    display:none;
  }
}
@media (max-width:767px){

  .thread-sidebar{
    height:var(--app-height);
    left:0;
    max-width:320px;
    padding-left:var(--safe-area-left);
    padding-top:var(--safe-area-top);
    position:fixed;
    top:0;
    transform:translateX(-100%);
    transition:transform .3s ease;
    width:100%;
    z-index:50;
  }

  .thread-sidebar.is-open,.thread-sidebar[data-open=true]{
    transform:translateX(0);
  }
  .online-users-compact{
    padding:var(--spacing-2);
    padding-bottom:calc(var(--spacing-2) + var(--safe-area-bottom));
  }

  .online-users-compact-avatars{
    max-height:48px;
  }

  .online-avatar{
    height:32px;
    width:32px;
  }

  .online-avatar:after{
    height:10px;
    width:10px;
  }
}

.header-federated-badge{
  align-items:center;
  background:var(--federation-badge-bg, #e8f4fd);
  border-radius:4px;
  color:var(--federation-badge-color, #06c);
  display:inline-flex;
  font-size:.625rem;
  font-weight:500;
  margin-left:.5rem;
  padding:.125rem .375rem;
  vertical-align:middle;
}
#chatHeaderTitle{
  color:var(--color-text-primary);
  font-size:1rem;
  font-weight:600;
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (min-width:768px){
  #chatHeaderTitle{
    max-width:300px;
  }
}
.mobile-threads-btn{
  display:none;
}

@media (max-width:767px){
  .mobile-threads-btn{
    align-items:center;
    background:var(--color-primary-50, #eff6ff);
    border:1px solid var(--color-primary-200, #bfdbfe);
    border-radius:var(--radius-md, .375rem);
    color:var(--color-primary-700, #1d4ed8);
    cursor:pointer;
    display:inline-flex;
    flex-shrink:0;
    font-size:.8125rem;
    font-weight:500;
    gap:.375rem;
    min-height:44px;
    min-width:44px;
    padding:.5rem .75rem;
    transition:all .15s ease;
  }

  .mobile-threads-btn:focus,.mobile-threads-btn:hover{
    background:var(--color-primary-100, #dbeafe);
    border-color:var(--color-primary-300, #93c5fd);
  }

  .mobile-threads-btn:active{
    transform:scale(.98);
  }

  .mobile-threads-label{
    display:inline;
  }

  .mobile-threads-badge{
    align-items:center;
    background:var(--color-error-500, #ef4444);
    border-radius:9px;
    color:#fff;
    display:inline-flex;
    font-size:.6875rem;
    font-weight:600;
    height:18px;
    justify-content:center;
    min-width:18px;
    padding:0 .25rem;
  }
  [data-theme=dark] .mobile-threads-btn{
    background:var(--color-primary-900, #1e3a5f);
    border-color:var(--color-primary-700, #1d4ed8);
    color:var(--color-primary-200, #bfdbfe);
  }

  [data-theme=dark] .mobile-threads-btn:focus,[data-theme=dark] .mobile-threads-btn:hover{
    background:var(--color-primary-800, #1e40af);
  }
}

.chat-mobile-onboarding{
  display:none;
}

@media (max-width:767px){
  .chat-mobile-onboarding{
    animation:slideUpFadeIn .4s ease-out;
    background:var(--color-primary-600, #2563eb);
    border-radius:var(--radius-lg, .75rem);
    bottom:100px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    color:#fff;
    left:12px;
    padding:1rem;
    position:fixed;
    right:12px;
    z-index:1000;
  }

  .chat-mobile-onboarding-content{
    align-items:flex-start;
    display:flex;
    gap:.75rem;
  }

  .chat-mobile-onboarding-icon{
    align-items:center;
    background:hsla(0,0%,100%,.2);
    border-radius:50%;
    display:flex;
    flex-shrink:0;
    font-size:1.25rem;
    height:40px;
    justify-content:center;
    width:40px;
  }

  .chat-mobile-onboarding-text{
    flex:1;
  }

  .chat-mobile-onboarding-title{
    font-size:.9375rem;
    font-weight:600;
    margin-bottom:.25rem;
  }

  .chat-mobile-onboarding-desc{
    font-size:.8125rem;
    line-height:1.4;
    opacity:.9;
  }

  .chat-mobile-onboarding-close{
    align-items:center;
    background:hsla(0,0%,100%,.2);
    border:none;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    display:flex;
    height:28px;
    justify-content:center;
    position:absolute;
    right:.5rem;
    top:.5rem;
    transition:background .15s;
    width:28px;
  }

  .chat-mobile-onboarding-close:hover{
    background:hsla(0,0%,100%,.3);
  }

  .chat-mobile-onboarding-actions{
    display:flex;
    gap:.5rem;
    margin-top:.75rem;
  }

  .chat-mobile-onboarding-btn{
    border:none;
    border-radius:var(--radius-md, .375rem);
    cursor:pointer;
    flex:1;
    font-size:.8125rem;
    font-weight:500;
    padding:.5rem 1rem;
    transition:all .15s;
  }

  .chat-mobile-onboarding-btn-primary{
    background:#fff;
    color:var(--color-primary-700, #1d4ed8);
  }

  .chat-mobile-onboarding-btn-primary:hover{
    background:var(--color-gray-100, #f3f4f6);
  }

  .chat-mobile-onboarding-btn-ghost{
    background:hsla(0,0%,100%,.15);
    color:#fff;
  }

  .chat-mobile-onboarding-btn-ghost:hover{
    background:hsla(0,0%,100%,.25);
  }

  @keyframes slideUpFadeIn{
    0%{
      opacity:0;
      transform:translateY(20px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
  .mobile-threads-btn.onboarding-highlight{
    animation:pulseHighlight 2s ease-in-out infinite;
  }

  @keyframes pulseHighlight{
    0%,to{
      box-shadow:0 0 0 0 rgba(37,99,235,.4);
    }
    50%{
      box-shadow:0 0 0 8px rgba(37,99,235,0);
    }
  }
}
.message-skeleton{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
}

.message-skeleton-item{
  align-items:flex-start;
  display:flex;
  gap:12px;
}

.message-skeleton-self{
  flex-direction:row-reverse;
}

.message-skeleton-avatar{
  animation:skeleton-shimmer 1.5s infinite;
  background:linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size:200% 100%;
  border-radius:50%;
  flex-shrink:0;
  height:36px;
  width:36px;
}

.message-skeleton-content{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:70%;
}

.message-skeleton-name{
  animation:skeleton-shimmer 1.5s infinite;
  background:linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size:200% 100%;
  border-radius:4px;
  height:12px;
  width:80px;
}

.message-skeleton-self .message-skeleton-name{
  display:none;
}

.message-skeleton-bubble{
  background:#f3f4f6;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:150px;
  padding:12px 16px;
}

.message-skeleton-self .message-skeleton-bubble{
  background:#dbeafe;
}

.message-skeleton-line{
  animation:skeleton-shimmer 1.5s infinite;
  background:linear-gradient(90deg, #d1d5db 25%, #e5e7eb 50%, #d1d5db 75%);
  background-size:200% 100%;
  border-radius:4px;
  height:14px;
}

.message-skeleton-self .message-skeleton-line{
  background:linear-gradient(90deg, #93c5fd 25%, #bfdbfe 50%, #93c5fd 75%);
  background-size:200% 100%;
}

@keyframes skeleton-shimmer{
  0%{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}
.message-list.has-messages .message-skeleton{
  display:none;
}
.message-skeleton:has(~.date-divider),.message-skeleton:has(~.message){
  display:none;
}
.message-list.has-messages .empty-state{
  display:none !important;
}

.message-list.show-empty .message-skeleton{
  display:none;
}

.message-list.show-empty .empty-state{
  display:flex !important;
}
.video-call-container{
  background:#1a1a1a;
  border-left:1px solid #333;
  bottom:80px;
  display:none;
  max-width:100%;
  position:absolute;
  right:0;
  top:60px;
  transition:width .2s ease,transform .2s ease;
  width:min(400px, 100vw);
  z-index:100;
}

.video-call-header{
  align-items:center;
  background:#2a2a2a;
  border-bottom:1px solid #333;
  display:flex;
  justify-content:space-between;
  padding:8px 12px;
}

.video-call-title{
  color:#fff;
  font-size:14px;
  font-weight:600;
}

.video-call-close{
  background:none;
  border:none;
  color:#999;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  padding:0 4px;
  transition:color .15s ease;
}

.video-call-close:hover{
  color:#fff;
}

.video-call-embed{
  height:calc(100% - 40px);
  width:100%;
}
@media (max-width:768px){
  .video-call-container{
    width:min(320px, calc(100vw - 40px));
  }
}
@media (max-width:480px){
  .video-call-container{
    border-bottom:1px solid #333;
    border-left:none;
    bottom:auto;
    left:0;
    max-height:50vh;
    right:0;
    top:60px;
    width:100%;
  }
}
.char-counter{
  bottom:4px;
  color:var(--color-text-muted, #6b7280);
  display:none;
  font-size:.75rem;
  padding:2px 8px;
  position:absolute;
  right:48px;
  text-align:right;
}

.char-counter.visible{
  display:block;
}

.char-counter.warning{
  color:var(--color-warning, #f59e0b);
}

.char-counter.danger{
  color:var(--color-error, #ef4444);
}
@media (max-width:480px){
  .char-counter{
    bottom:2px;
    font-size:.625rem;
    right:52px;
  }
}
.chat-more-menu{
  background:var(--color-bg-primary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  min-width:180px;
  padding:var(--spacing-1);
  position:absolute;
  right:0;
  top:100%;
  z-index:100;
}

.chat-more-menu-item{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--radius-md);
  color:var(--color-text-primary);
  cursor:pointer;
  display:flex;
  font-size:var(--text-sm);
  gap:var(--spacing-2);
  min-height:44px;
  padding:var(--spacing-3);
  text-align:left;
  width:100%;
}

.chat-more-menu-item:hover{
  background:var(--color-bg-secondary);
}

.chat-more-menu-item svg{
  color:var(--color-text-secondary);
  flex-shrink:0;
}

@media (max-width:480px){
  .chat-more-menu{
    min-width:200px;
    right:var(--spacing-2);
  }
}
#quickDMModal .modal-content{
  max-height:85vh;
  max-height:85dvh;
  max-width:400px;
  overflow-y:auto;
  width:90%;
}

@media (max-width:480px){
  #quickDMModal .modal-content{
    margin:var(--spacing-4);
    max-height:90vh;
    max-height:90dvh;
    width:95%;
  }

  #quickDMResults{
    max-height:40vh !important;
  }
}
#newThreadModal .modal-content{
  max-height:85vh;
  max-height:85dvh;
  max-width:500px;
  overflow-y:auto;
  width:90%;
}

@media (max-width:480px){
  #newThreadModal .modal-content{
    border-radius:var(--radius-lg);
    max-height:90vh;
    max-height:90dvh;
    width:95%;
  }

  #newThreadModal .form-group{
    margin-bottom:var(--spacing-4);
  }
}

#storySelect,#storySelect option,#subgroupSelect,#subgroupSelect option{
  background-color:var(--color-bg-primary);
  color:var(--color-text-primary);
}

#storySelect option,#subgroupSelect option{
  padding:8px 4px;
}
@media (max-width:480px){
  #chatHeaderTitle{
    max-width:120px !important;
  }
}

@media (max-width:360px){
  #chatHeaderTitle{
    max-width:100px !important;
  }
}
@media (max-width:480px){
  .chat-poll{
    max-width:100% !important;
  }
  .message{
    max-width:90%;
  }
}

@media (max-width:360px){
  .message{
    max-width:95%;
  }
  .emoji-picker{
    max-width:calc(100vw - 16px);
    min-width:240px;
  }

  .emoji-picker-grid,.emoji-picker-quick{
    grid-template-columns:repeat(5, 1fr);
  }

  .emoji-btn{
    font-size:1.25rem;
    height:36px;
    width:36px;
  }
}
.vc-composer{
  background:linear-gradient(to bottom, transparent, var(--vc-canvas) 18%);
  color:var(--vc-text);
  flex-shrink:0;
  font-family:var(--vc-font-ui);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.vc-composer__attachment,.vc-composer__emoji,.vc-composer__mention,.vc-composer__reply{
  margin:0 var(--vc-gutter);
}
.vc-composer__attachment,.vc-composer__emoji,.vc-composer__mention{ margin-bottom:var(--vc-gap); }
.vc-composer__reply{ align-items:center;
  background:var(--vc-teal-50);
  border:1px solid var(--vc-teal-100);
  border-bottom:0;
  border-radius:var(--vc-r-chip) var(--vc-r-chip) 0 0;
  display:flex; gap:10px;
  padding:8px 10px 8px 12px;
}
.vc-composer__reply-icon{ color:var(--vc-accent); display:grid; place-items:center; }
.vc-composer__reply-body{ flex:1; font-size:12px; line-height:1.35; min-width:0; }
.vc-composer__reply-meta{ color:var(--vc-text-muted); }
.vc-composer__reply-name{ color:var(--vc-accent); font-weight:600; }
.vc-composer__reply-snippet{
  color:var(--vc-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-composer__reply-close{
  background:transparent; border:0;
  border-radius:8px; color:var(--vc-text-muted); cursor:pointer; display:grid; flex-shrink:0; height:28px; place-items:center;
  width:28px;
}
.vc-composer__attachment{ align-items:center;
  background:var(--vc-cream);
  border-radius:var(--vc-r-chip);
  display:inline-flex; gap:10px;
  max-width:fit-content;
  padding:8px 10px 8px 12px;
}
.vc-composer__attachment-icon{
  background:var(--vc-surface); border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--vc-hairline); color:var(--vc-accent);
  display:grid; height:32px; place-items:center;
  width:32px;
}
.vc-composer__attachment-name{
  font-size:13px; font-weight:500; letter-spacing:-.01em;
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-composer__attachment-size{ color:var(--vc-text-muted); font-size:11px; }
.vc-composer__attachment-close{ background:transparent; border:0; border-radius:6px;
  color:var(--vc-text-muted); cursor:pointer;
  display:grid; height:24px; place-items:center;
  width:24px;
}
.vc-composer__emoji,.vc-composer__mention{
  background:var(--vc-surface);
  border-radius:var(--vc-r-card);
  box-shadow:var(--vc-shadow-2);
  overflow:hidden;
}
.vc-composer__emoji-tabs,.vc-composer__mention-head{
  color:var(--vc-text-muted);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:8px 14px 6px; text-transform:uppercase;
}
.vc-composer__mention-query{ color:var(--vc-accent); font-family:ui-monospace,monospace; }
.vc-composer__mention-item{ align-items:center;
  display:flex; gap:10px;
  padding:8px 14px;
}
.vc-composer__mention-item--active{ background:var(--vc-teal-50); }
.vc-composer__mention-name{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.vc-composer__mention-role{ color:var(--vc-text-muted); font-size:12px; }
.vc-composer__mention-hint{
  background:var(--vc-ink-100); border-radius:4px;
  color:var(--vc-text-muted); font-family:ui-monospace,monospace;
  font-size:11px;
  padding:2px 6px;
}

.vc-composer__emoji-tabs{ border-bottom:1px solid var(--vc-hairline); display:flex; gap:4px; padding:6px 8px; }
.vc-composer__emoji-tab{ border-radius:8px; color:var(--vc-text-muted); cursor:pointer; font-size:12px; font-weight:500; padding:6px 10px; }
.vc-composer__emoji-tab--active{ background:var(--vc-teal-50); color:var(--vc-accent); }
.vc-composer__emoji-grid{ display:grid; gap:2px; grid-template-columns:repeat(8, 1fr); padding:6px; }
.vc-composer__emoji-cell{ aspect-ratio:1; border-radius:8px; cursor:pointer; display:grid; font-size:22px; place-items:center; }
.vc-composer__emoji-cell:hover{ background:var(--vc-teal-50); }
.vc-composer__card{
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:var(--vc-r-card);
  box-shadow:var(--vc-shadow-1);
  margin:var(--vc-gap) var(--vc-gutter) var(--vc-gutter);
  overflow:hidden;
}
.vc-composer__reply+.vc-composer__card{
  border-radius:0 0 var(--vc-r-card) var(--vc-r-card);
  border-top-color:var(--vc-teal-100);
  margin-top:0;
}

.vc-composer__input{ background:transparent;
  border:0; box-sizing:border-box; color:var(--vc-text);
  display:block;
  font:inherit;
  font-size:var(--vc-fs-input);
  letter-spacing:-.005em; line-height:var(--vc-lh-input);
  max-height:40vh;
  min-height:calc(var(--vc-fs-input)*var(--vc-lh-input) + 22px); outline:0;
  padding:11px var(--vc-pad-x); resize:none; width:100%;
}
.vc-composer__input::placeholder{ color:var(--vc-text-placeholder); }
.vc-composer__input:focus{ outline:0; }
.vc-composer__voice{ align-items:center;
  display:flex; gap:12px;
  height:var(--vc-hit); padding:0 6px 0 12px;
}
.vc-composer__voice-timer{ align-items:center;
  display:inline-flex;
  font-family:ui-monospace,monospace; font-size:13px;
  font-variant-numeric:tabular-nums; gap:6px; min-width:40px;
}
.vc-composer__voice-dot{ background:var(--vc-record); border-radius:50%; height:7px; width:7px; }
.vc-composer__voice-wave{ align-items:center; display:flex; flex:1; gap:3px; height:24px; }
.vc-composer__voice-wave>i{
  background:var(--vc-ink-300); border-radius:1px;
  display:block; width:2px;
}
.vc-composer__voice-wave>i.is-played{ background:var(--vc-accent); }
.vc-composer__toolbar{ align-items:center; display:flex; gap:2px; padding:4px 6px; }
.vc-composer__toolbar-spacer{ flex:1; }

.vc-composer__tool{
  background:transparent;
  border:0;
  border-radius:12px; color:var(--vc-text-muted); cursor:pointer; display:grid; height:var(--vc-hit); padding:0; place-items:center;
  transition:background var(--vc-dur) var(--vc-ease), color var(--vc-dur) var(--vc-ease);
  width:var(--vc-hit);
}
.vc-composer__tool:hover{ background:var(--vc-ink-100); color:var(--vc-text); }
.vc-composer__tool--active{ background:var(--vc-teal-100); color:var(--vc-accent); }
.vc-composer__tool--danger{ color:var(--vc-record); }

.vc-composer__draft{ align-items:center; color:var(--vc-text-muted);
  display:inline-flex;
  font-size:11px; gap:4px;
  letter-spacing:-.005em;
  margin-right:8px;
}
.vc-composer__draft-check{ color:var(--vc-accent); display:grid; place-items:center; }

.vc-composer__send{ background:transparent;
  border:0; cursor:pointer;
  display:grid; height:var(--vc-hit); padding:0; place-items:center;
  width:var(--vc-hit);
}
.vc-composer__send-disc{
  background:var(--vc-accent); border-radius:50%;
  box-shadow:0 1px 2px oklch(.3 .06 210 / .25); color:var(--vc-on-accent);
  display:grid; height:36px; place-items:center;
  transition:background var(--vc-dur) var(--vc-ease);
  width:36px;
}
.vc-composer__send[disabled]{ cursor:default; }
.vc-composer__send[disabled] .vc-composer__send-disc{
  background:transparent;
  border:1.5px solid var(--vc-ink-300); box-shadow:none; color:var(--vc-ink-500);
}
.vc-bubble{
  align-items:flex-end;
  display:flex;
  gap:8px;
  margin-top:16px;
  padding:0 var(--vc-gutter);
}
.vc-bubble--mine{ flex-direction:row-reverse; }
.vc-bubble--grouped{ margin-top:4px; }
.vc-bubble__avatar-slot{ flex-shrink:0; width:32px; }
.vc-bubble--mine .vc-bubble__avatar-slot{ display:none; }
.vc-bubble__col{
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  max-width:min(78%, 480px);
  min-width:0;
}
.vc-bubble--mine .vc-bubble__col{ align-items:flex-end; }
.vc-bubble__header{
  align-items:baseline;
  display:flex;
  flex-wrap:wrap;
  font-size:13px;
  gap:6px;
  letter-spacing:-.01em;
  margin-bottom:4px;
  padding:0 4px;
}
.vc-bubble__author{ color:var(--vc-text); font-weight:600; }

.vc-bubble__role-badge{
  background:var(--vc-teal-50);
  border:1px solid var(--vc-teal-100);
  border-radius:4px;
  color:var(--vc-accent);
  font-size:10px; font-weight:600; letter-spacing:.04em;
  padding:1px 5px;
  text-transform:uppercase;
  vertical-align:2px;
}

.vc-bubble__federation{ align-items:center; color:var(--vc-text-muted);
  display:inline-flex;
  font-size:11px; gap:4px;
  margin-left:4px;
  white-space:nowrap;
}
.vc-bubble__federation strong{ color:var(--vc-text); font-weight:500; }
.vc-bubble__body{
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:14px 14px 14px 4px;
  box-sizing:border-box;
  color:var(--vc-text);
  font-size:14px;
  letter-spacing:-.005em; line-height:1.5;
  max-width:100%;
  padding:8px 12px;
  position:relative;
  white-space:pre-wrap;
  word-break:break-word;
}
.vc-bubble--grouped .vc-bubble__body{ border-radius:14px 14px 14px 4px; }
.vc-bubble--mine .vc-bubble__body{
  background:var(--vc-teal-50);
  border-color:var(--vc-teal-100);
  border-radius:14px 14px 4px 14px;
  color:var(--vc-text);
}
.vc-bubble__reply{
  background:var(--vc-teal-50);
  border-left:2px solid var(--vc-accent);
  border-radius:6px;
  display:flex; gap:8px;
  margin-bottom:6px;
  min-width:0;
  padding:6px 10px;
}
.vc-bubble--mine .vc-bubble__reply{ background:oklch(.95 .025 210); }
.vc-bubble__reply-name{
  color:var(--vc-accent);
  font-size:11px; font-weight:600;
  letter-spacing:-.01em;
}
.vc-bubble__reply-text{
  color:var(--vc-text-muted);
  font-size:12px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-bubble__mention{
  background:var(--vc-teal-100);
  border-radius:4px;
  color:var(--vc-accent);
  font-weight:500;
  padding:1px 5px;
}
.vc-bubble__body a{
  color:var(--vc-accent);
  text-decoration-color:var(--vc-teal-300);
}
.vc-bubble__deleted{
  color:var(--vc-text-muted);
  font-style:italic;
  text-decoration:line-through;
  text-decoration-color:var(--vc-ink-300);
}
.vc-bubble__meta{ align-items:center;
  color:var(--vc-text-muted);
  display:flex;
  flex-shrink:0;
  font-size:11px; gap:4px;
  margin-top:4px;
  white-space:nowrap;
}
.vc-bubble--mine .vc-bubble__meta{
  display:inline-flex;
  float:right;
  margin-left:8px;
  margin-top:2px;
  vertical-align:bottom;
}
.vc-bubble__meta-edited{ font-style:italic; }
.vc-bubble__ticks{ color:var(--vc-ink-300); }
.vc-bubble__ticks--read{ color:oklch(.55 .1 210); }
.vc-bubble__sovereign{ background:transparent; border:0;
  color:var(--vc-accent);
  cursor:pointer; display:grid; height:22px; opacity:.75;
  padding:0; place-items:center;
  width:22px;
}
.vc-bubble__image{
  border-radius:12px;
  box-shadow:inset 0 0 0 1px oklch(0 0 0 / .06);
  display:block;
  margin-bottom:6px;
  max-height:300px;
  max-width:100%;
}

.vc-bubble__file{ align-items:center;
  background:var(--vc-cream);
  border-radius:10px;
  box-sizing:border-box; color:inherit;
  display:flex; gap:10px;
  margin-bottom:4px;
  min-height:44px;
  padding:8px;
  text-decoration:none;
}
.vc-bubble__file-icon{
  background:var(--vc-surface);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--vc-hairline);
  color:var(--vc-accent);
  display:grid;
  flex-shrink:0; height:32px; place-items:center;
  width:32px;
}
.vc-bubble__file-meta{ flex:1; min-width:0; }
.vc-bubble__file-name{
  display:block; font-size:13px; font-weight:500;
  letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-bubble__file-size{ color:var(--vc-text-muted);
  display:block; font-size:11px;
}
.vc-bubble__file-download{
  color:var(--vc-text-muted);
  display:grid; height:32px; place-items:center;
  width:32px;
}

.vc-bubble__voice{ align-items:center;
  background:var(--vc-cream);
  border-radius:10px;
  box-sizing:border-box;
  display:flex; gap:10px;
  margin-bottom:4px;
  min-height:44px;
  min-width:200px;
  padding:8px;
}
.vc-bubble__voice-play{
  background:var(--vc-accent);
  border:0; border-radius:50%; color:var(--vc-on-accent);
  cursor:pointer; display:grid;
  flex-shrink:0; height:36px; place-items:center;
  width:36px;
}
.vc-bubble__voice-wave{ align-items:center;
  display:flex; flex:1; gap:2px;
  height:20px;
}
.vc-bubble__voice-bar{ background:var(--vc-ink-300); border-radius:1px; width:2px; }
.vc-bubble__voice-bar--played{ background:var(--vc-accent); }
.vc-bubble__voice-time{
  color:var(--vc-text-muted);
  font-family:ui-monospace,monospace; font-size:12px;
  font-variant-numeric:tabular-nums;
}
.vc-bubble__reactions{
  display:flex; flex-wrap:wrap; gap:4px;
  margin-top:4px;
  padding:8px 0;
}
.vc-bubble__reaction{ align-items:center;
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:999px; color:var(--vc-text);
  cursor:pointer;
  display:inline-flex;
  font:inherit;
  font-size:12px;
  font-variant-numeric:tabular-nums; gap:4px;
  height:28px; padding:0 8px;
}
.vc-bubble__reaction--mine{
  background:var(--vc-teal-50);
  border-color:var(--vc-teal-300);
}
.vc-bubble__reaction-emoji{ font-size:14px; line-height:1; }
.vc-bubble__reaction-count{ color:var(--vc-text-muted); }
.vc-bubble__reaction--mine .vc-bubble__reaction-count{
  color:var(--vc-accent); font-weight:600;
}
.vc-bubble__reaction-add{
  background:transparent;
  border:1px dashed var(--vc-hairline); border-radius:999px; color:var(--vc-text-muted);
  cursor:pointer;
  display:grid; height:28px; padding:0; place-items:center;
  width:28px;
}
.vc-channel-list{
  background:var(--vc-canvas);
  color:var(--vc-text);
  display:flex;
  flex-direction:column;
  font-family:var(--vc-font-ui);
  height:100%;
}
.vc-channel-list__header{
  background:var(--vc-canvas);
  border-bottom:1px solid var(--vc-hairline);
  padding:14px 16px 8px;
}
.vc-channel-list--desktop .vc-channel-list__header{ padding:14px 12px 8px; }

.vc-channel-list__title-row{ align-items:center;
  display:flex; justify-content:space-between;
  margin-bottom:10px;
}
.vc-channel-list__title{ color:var(--vc-text); font-size:22px; font-weight:600;
  letter-spacing:-.02em;
  margin:0;
}
.vc-channel-list--desktop .vc-channel-list__title{ font-size:16px; }

.vc-channel-list__compose{
  background:transparent;
  border:0; border-radius:10px; color:var(--vc-text);
  cursor:pointer; display:grid; height:36px; place-items:center;
  width:36px;
}

.vc-channel-list__search{ align-items:center;
  background:var(--vc-cream);
  border:1px solid var(--vc-hairline);
  border-radius:10px;
  color:var(--vc-text-muted);
  display:flex;
  font-size:13px; gap:8px;
  min-height:44px; padding:0 10px;
}
.vc-channel-list__tabs{
  background:var(--vc-canvas);
  border-bottom:1px solid var(--vc-hairline);
  display:flex; gap:6px;
  overflow-x:auto;
  padding:10px 12px;
}
.vc-channel-list__tab{
  background:transparent;
  border:0; border-radius:999px; color:var(--vc-text-muted);
  cursor:pointer; font:inherit;
  font-size:13px; font-weight:500;
  letter-spacing:-.01em;
  min-height:44px; padding:0 12px;
  white-space:nowrap;
}
.vc-channel-list__tab--active{
  background:var(--vc-teal-50);
  box-shadow:inset 0 0 0 1px var(--vc-teal-100);
  color:var(--vc-accent);
  font-weight:600;
}
.vc-channel-list__section-label{
  color:var(--vc-text-muted);
  font-size:11px; font-weight:600;
  letter-spacing:.08em;
  padding:12px 16px 6px; text-transform:uppercase;
}
.vc-channel-list__body{ flex:1; overflow-y:auto; }
.vc-channel-list__item{ align-items:center; color:inherit;
  cursor:pointer;
  display:flex; gap:12px;
  min-height:64px;
  padding:8px 16px;
  position:relative;
  text-decoration:none;
}
.vc-channel-list--desktop .vc-channel-list__item{
  min-height:52px;
  padding:6px 12px;
}
.vc-channel-list__item:hover{ background:var(--vc-cream); }
.vc-channel-list__item--selected{
  background:var(--vc-teal-50);
}
.vc-channel-list__item--selected:before{
  background:var(--vc-accent); border-radius:2px; bottom:8px;
  content:"";
  left:0; position:absolute; top:8px;
  width:3px;
}
.vc-channel-list__avatar{
  flex-shrink:0; height:36px;
  position:relative;
  width:36px;
}
.vc-channel-list--desktop .vc-channel-list__avatar{ height:32px; width:32px; }

.vc-channel-list__channel-icon{
  background:var(--vc-teal-50);
  border:1px solid var(--vc-hairline);
  border-radius:10px;
  color:var(--vc-accent);
  display:grid;
  font-weight:600; height:100%;
  letter-spacing:-.02em; place-items:center;
  width:100%;
}
.vc-channel-list__item--muted .vc-channel-list__channel-icon{
  background:oklch(.94 .005 80);
  color:var(--vc-text-muted);
}
.vc-channel-list__avatar .vc-avatar,.vc-channel-list__avatar .vc-avatar-initial{
  border:1px solid var(--vc-hairline);
  border-radius:10px; height:100%;
  width:100%;
}
.vc-channel-list__avatar .vc-avatar{
  display:block;
  object-fit:cover;
}
.vc-channel-list__avatar .vc-avatar-initial{
  background:var(--vc-teal-50);
  color:var(--vc-accent);
  display:grid;
  font-size:12px;
  font-weight:600;
  letter-spacing:-.02em; place-items:center;
}
.vc-channel-list__presence{
  background:oklch(.68 .14 145);
  border-radius:50%; bottom:-1px;
  box-shadow:0 0 0 2px var(--vc-canvas); height:10px;
  position:absolute;
  right:-1px;
  width:10px;
}
.vc-channel-list__item--channel .vc-channel-list__presence{ display:none; }
.vc-channel-list__main{
  flex:1; min-width:0;
}
.vc-channel-list__name-row{ align-items:center;
  display:flex; gap:6px;
  min-width:0;
}
.vc-channel-list__name{
  color:var(--vc-text); flex:0 1 auto;
  font-size:14px; font-weight:500;
  letter-spacing:-.01em;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-channel-list--desktop .vc-channel-list__name{ font-size:13px; }

.vc-channel-list__item--unread .vc-channel-list__name{ font-weight:600; }
.vc-channel-list__item--muted .vc-channel-list__name{ color:var(--vc-text-muted); }

.vc-channel-list__fed,.vc-channel-list__pin{ align-items:center;
  color:var(--vc-text-muted);
  display:inline-flex;
  flex-shrink:0;
}

.vc-channel-list__preview{
  color:var(--vc-text-muted);
  font-size:13px;
  letter-spacing:-.005em;
  margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-channel-list--desktop .vc-channel-list__preview{ font-size:12px; }
.vc-channel-list__item--unread .vc-channel-list__preview{ font-weight:500; }
.vc-channel-list__meta{ align-items:flex-end;
  display:flex; flex-direction:column; flex-shrink:0;
  gap:4px; min-height:36px;
}
.vc-channel-list__time{ align-items:center;
  color:var(--vc-text-muted);
  display:inline-flex;
  font-size:11px;
  font-variant-numeric:tabular-nums; gap:4px;
  white-space:nowrap;
}
.vc-channel-list__item--unread .vc-channel-list__time{ color:var(--vc-accent); }
.vc-channel-list__item--muted .vc-channel-list__time{ color:var(--vc-text-muted); }

.vc-channel-list__badge{ align-items:center;
  background:var(--vc-accent);
  border-radius:999px; color:var(--vc-on-accent);
  display:inline-flex;
  font-size:11px;
  font-variant-numeric:tabular-nums; font-weight:600; height:20px; justify-content:center;
  min-width:20px; padding:0 6px;
}
.vc-channel-list__badge--mention:before{ content:"@"; }
.vc-channel-list__badge--muted{
  background:oklch(.9 .005 80);
  color:var(--vc-text-muted);
}
.vc-channel-list__empty{
  align-items:center; display:flex;
  flex:1; flex-direction:column; gap:6px; justify-content:center;
  padding:40px 24px; text-align:center;
}
.vc-channel-list__empty-icon{
  background:var(--vc-teal-50);
  border:1px solid var(--vc-teal-100);
  border-radius:50%;
  color:var(--vc-accent);
  display:grid; height:44px; margin-bottom:6px; place-items:center;
  width:44px;
}
.vc-channel-list__empty-title{
  font-size:15px; font-weight:600; letter-spacing:-.01em;
}
.vc-channel-list__empty-body{ color:var(--vc-text-muted);
  font-size:13px; line-height:1.5;
}
.vc-channel-list__empty-cta{
  color:var(--vc-accent);
  font-size:13px; font-weight:500;
  margin-top:8px; text-decoration:none;
}
.vc-member-card{
  background:var(--vc-surface);
  color:var(--vc-text);
  font-family:var(--vc-font-ui);
  overflow:hidden;
  position:relative;
}

.vc-member-card--popover{
  border:1px solid var(--vc-hairline);
  border-radius:16px;
  box-shadow:var(--vc-shadow-2);
  max-width:360px;
  width:340px;
}

.vc-member-card--sheet{
  border:1px solid var(--vc-hairline);
  border-bottom:none;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  box-shadow:0 -8px 32px oklch(0 0 0 / .12);
  max-height:80vh;
  max-width:100vw;
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom, 16px);
  width:100%;
}
.vc-member-card__handle{
  background:var(--vc-ink-300);
  border-radius:999px;
  height:6px;
  margin:8px auto 4px;
  width:40px;
}
.vc-member-card__close{
  background:transparent;
  border:0;
  border-radius:8px;
  color:var(--vc-text-muted);
  cursor:pointer;
  display:grid; height:32px;
  place-items:center;
  position:absolute; right:10px;
  top:10px;
  width:32px;
  z-index:1;
}
.vc-member-card__close:hover{ background:var(--vc-surface-recessed); }
.vc-member-card__header{
  align-items:flex-start;
  display:flex;
  gap:14px;
  padding:16px 16px 12px;
}

.vc-member-card__avatar-slot{
  flex-shrink:0; height:72px;
  position:relative;
  width:72px;
}
.vc-member-card__presence{
  background:oklch(.68 .14 145);
  border-radius:50%; bottom:2px;
  box-shadow:0 0 0 3px var(--vc-surface); height:12px;
  position:absolute;
  right:2px;
  width:12px;
}

.vc-member-card__identity{
  flex:1;
  min-width:0;
  padding-top:2px;
}

.vc-member-card__name{
  color:var(--vc-text);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.25;
  overflow-wrap:break-word;
}

.vc-member-card__pronouns{
  letter-spacing:-.005em;
  margin-top:2px;
}

.vc-member-card__federation,.vc-member-card__pronouns{
  color:var(--vc-text-muted);
  font-size:12px;
  white-space:nowrap;
}

.vc-member-card__federation{
  align-items:center;
  display:inline-flex;
  gap:4px;
  margin-top:6px;
}
.vc-member-card__federation strong{
  color:var(--vc-text);
  font-weight:500;
}

.vc-member-card__last-active{
  color:var(--vc-text-muted);
  font-size:11px;
  margin-top:4px;
}
.vc-member-card__pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 16px 12px;
}

.vc-member-card__pill{
  align-items:center;
  background:var(--vc-teal-50);
  border:1px solid var(--vc-teal-100);
  border-radius:4px;
  color:var(--vc-accent);
  display:inline-flex;
  font-size:11px;
  font-weight:600;
  gap:4px;
  height:20px;
  letter-spacing:.04em;
  padding:0 7px;
  text-transform:uppercase;
}
.vc-member-card__pill--gov{
  background:transparent;
}
.vc-member-card__bio{
  color:var(--vc-text-muted);
  display:-webkit-box;
  font-size:13px;
  letter-spacing:-.005em;
  -webkit-line-clamp:3;
  line-height:1.5;
  padding:0 16px 12px;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.vc-member-card__subgroups{ padding:0 16px 14px; }

.vc-member-card__subgroups-label{
  color:var(--vc-text-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:8px;
  text-transform:uppercase;
}

.vc-member-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.vc-member-card__chip{
  align-items:center;
  background:var(--vc-cream);
  border:1px solid var(--vc-hairline);
  border-radius:999px;
  color:var(--vc-text);
  cursor:pointer;
  display:inline-flex;
  font:inherit;
  font-size:12px;
  font-weight:500;
  height:26px;
  letter-spacing:-.005em;
  padding:0 10px;
  white-space:nowrap;
}
.vc-member-card__chip:hover{ background:var(--vc-surface-recessed); }
.vc-member-card__actions{
  align-items:center;
  background:var(--vc-surface);
  border-top:1px solid var(--vc-hairline);
  display:flex;
  gap:8px;
  padding:12px 16px 16px;
}

.vc-member-card__btn{
  align-items:center;
  border:0;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  flex:1;
  font:inherit;
  font-size:13px;
  font-weight:600;
  gap:6px;
  height:44px;
  justify-content:center;
  letter-spacing:-.01em;
  min-width:0;
  padding:0 14px;
}
.vc-member-card__btn-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vc-member-card__btn--primary{
  background:var(--vc-accent);
  color:var(--vc-on-accent);
}
.vc-member-card__btn--secondary{
  background:var(--vc-teal-50);
  border:1px solid var(--vc-teal-100);
  box-sizing:border-box;
  color:var(--vc-accent);
}
.vc-member-card__btn--outline{
  background:transparent;
  border:1px solid var(--vc-hairline);
  box-sizing:border-box;
  color:var(--vc-text);
}

.vc-member-card__btn[disabled]{
  cursor:not-allowed;
  opacity:.5;
}
.vc-member-card__more{
  background:transparent;
  border:1px solid var(--vc-hairline);
  border-radius:12px;
  color:var(--vc-text-muted);
  cursor:pointer;
  display:grid;
  flex-shrink:0;
  height:44px;
  place-items:center;
  width:44px;
}
.vc-member-card__more:hover{ background:var(--vc-surface-recessed); }
.vc-member-card__profile-row{
  border-top:1px solid var(--vc-hairline);
  padding:10px 16px;
  text-align:center;
}
.vc-member-card__profile-row a{
  color:var(--vc-accent);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
}
.vc-member-card__skel{
  background:var(--vc-ink-100);
  border-radius:6px;
  display:inline-block;
}
.vc-member-card__error{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:36px 24px;
  text-align:center;
}
.vc-member-card__error-icon{
  background:oklch(.95 .02 60);
  border:1px solid oklch(.9 .03 60);
  border-radius:50%;
  color:oklch(.55 .1 60);
  display:grid; height:44px;
  place-items:center;
  width:44px;
}
.vc-member-card__error-title{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
}
.vc-member-card__error-body{
  color:var(--vc-text-muted);
  font-size:12px;
  line-height:1.5;
  max-width:240px;
}
.vc-member-card__retry{
  background:var(--vc-teal-50);
  border:1px solid var(--vc-teal-100);
  border-radius:999px;
  color:var(--vc-accent);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:600;
  height:36px;
  margin-top:6px;
  padding:0 14px;
}
.vc-member-card-backdrop{
  background:oklch(.2 .005 80 / .45);
  inset:0;
  position:fixed;
  z-index:100;
}
.vc-member-card-backdrop>.vc-member-card--sheet{ bottom:0;
  left:0;
  position:absolute; right:0;
}
.vc-thread-header{
  align-items:center;
  background:var(--vc-surface);
  border-bottom:1px solid var(--vc-hairline);
  color:var(--vc-text);
  display:flex;
  flex-shrink:0;
  font-family:var(--vc-font-ui);
  gap:8px;
  height:56px;
  padding:0 8px;
}
.vc-thread-header--desktop{
  height:64px;
  padding:0 16px;
}
.vc-thread-header__back{
  background:transparent;
  border:0;
  border-radius:10px;
  color:var(--vc-text);
  cursor:pointer;
  display:grid;
  flex-shrink:0;
  height:var(--vc-hit);
  margin-left:-4px;
  place-items:center;
  width:var(--vc-hit);
}
.vc-thread-header--desktop .vc-thread-header__back{ display:none; }
.vc-thread-header__icon{
  background:var(--vc-teal-50);
  border-radius:9px;
  color:var(--vc-accent);
  display:grid;
  flex-shrink:0;
  height:32px;
  overflow:hidden;
  place-items:center;
  width:32px;
}
.vc-thread-header--desktop .vc-thread-header__icon{
  height:36px;
  width:36px;
}
.vc-thread-header__icon img{
  height:100%;
  object-fit:cover;
  width:100%;
}
.vc-thread-header__title-tap{
  align-items:flex-start;
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  display:flex;
  flex:1;
  flex-direction:column;
  font:inherit;
  gap:1px;
  justify-content:center;
  margin:0 -6px;
  min-width:0;
  padding:4px 6px;
  text-align:left;
}
.vc-thread-header__title-row{
  align-items:center;
  display:flex;
  gap:6px;
  max-width:100%;
  min-width:0;
}
.vc-thread-header__presence{
  background:oklch(.68 .14 145);
  border-radius:50%;
  flex-shrink:0;
  height:8px;
  width:8px;
}
.vc-thread-header__name{
  color:var(--vc-text);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vc-thread-header--desktop .vc-thread-header__name{ font-size:16px; }
.vc-thread-header__chevron,.vc-thread-header__state-glyph{
  color:var(--vc-text-muted);
  flex-shrink:0;
}
.vc-thread-header__chevron--mobile-hide,.vc-thread-header__chevron[hidden]{ display:none; }
.vc-thread-header--desktop .vc-thread-header__chevron--mobile-hide{
  display:block;
}
.vc-thread-header__scope{
  align-items:center;
  color:var(--vc-text-muted);
  display:flex;
  font-size:11.5px;
  gap:5px;
  line-height:1.35;
  max-width:100%;
  min-width:0;
  white-space:nowrap;
}
.vc-thread-header--desktop .vc-thread-header__scope{ font-size:12px; }
.vc-thread-header__scope-text{
  overflow:hidden;
  text-overflow:ellipsis;
}
.vc-thread-header__federation{
  align-items:center;
  color:var(--vc-accent);
  display:inline-flex;
  flex-shrink:0;
  gap:3px;
  white-space:nowrap;
}
.vc-thread-header__actions{
  align-items:center;
  display:flex;
  flex-shrink:0;
  gap:2px;
}
.vc-thread-header__action{
  background:transparent;
  border:0;
  border-radius:10px;
  color:var(--vc-text-muted);
  cursor:pointer;
  display:grid;
  height:var(--vc-hit);
  place-items:center;
  width:var(--vc-hit);
}
.vc-thread-header__action:hover{ color:var(--vc-text); }
.vc-thread-header__strip{
  align-items:center;
  background:var(--vc-teal-50);
  border-bottom:1px solid var(--vc-teal-100);
  color:var(--vc-accent);
  display:flex;
  font-family:var(--vc-font-ui);
  font-size:12.5px;
  font-weight:500;
  gap:8px;
  height:40px;
  letter-spacing:-.005em;
  padding:0 14px;
}
.vc-thread-header__strip--amber{
  background:var(--vc-amber-50);
  border-bottom-color:var(--vc-amber-100);
  color:var(--vc-amber-900);
}
.vc-thread-header__strip-live{
  background:currentColor;
  border-radius:50%;
  flex-shrink:0;
  height:6px;
  width:6px;
}
.vc-thread-header__strip-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vc-thread-header__strip-action{
  background:var(--vc-accent);
  border:0;
  border-radius:999px;
  color:var(--vc-on-accent);
  cursor:pointer;
  flex-shrink:0;
  font:600 12px var(--vc-font-ui);
  height:28px;
  padding:0 12px;
}
.vc-thread-header__strip--amber .vc-thread-header__strip-action{
  background:var(--vc-amber-900);
}
.vc-thread-header__about{
  background:var(--vc-surface);
  border-bottom:1px solid var(--vc-hairline);
  box-shadow:var(--vc-shadow-1);
  display:flex;
  flex-direction:column;
  font-family:var(--vc-font-ui);
  gap:12px;
  padding:14px 14px 16px;
}
.vc-thread-header__about-name{
  color:var(--vc-text);
  font-size:17px;
  font-weight:600;
}
.vc-thread-header__about-purpose{
  color:var(--vc-text);
  font-size:13.5px;
  line-height:1.5;
}
.vc-thread-header__about-scope{
  align-items:center;
  color:var(--vc-text-muted);
  display:inline-flex;
  font-size:12px;
  gap:6px;
}
.vc-thread-header__about-section-label{
  color:var(--vc-text-muted);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:6px;
  text-transform:uppercase;
}
.vc-thread-header__about-mods{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.vc-thread-header__about-mod{
  align-items:center;
  background:var(--vc-cream);
  border:1px solid var(--vc-hairline);
  border-radius:999px;
  display:inline-flex;
  font-size:12px;
  gap:6px;
  padding:4px 10px 4px 4px;
}
.vc-thread-header__about-docs{
  background:var(--vc-surface-recessed);
  border:1px dashed var(--vc-hairline);
  border-radius:10px;
  color:var(--vc-text-muted);
  font-size:12px;
  padding:10px 12px;
}
.vc-toast-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  position:fixed;
  z-index:1000;
}
.vc-toast-stack>*{ pointer-events:auto; }
.vc-toast-stack--mobile{
  bottom:calc(var(--vc-gutter) + env(safe-area-inset-bottom, 0px));
  left:var(--vc-gutter);
  right:var(--vc-gutter);
}
.vc-toast-stack--desktop{
  right:16px;
  top:16px;
  width:360px;
}
.vc-toast{
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:14px;
  box-shadow:var(--vc-shadow-2);
  display:flex;
  font-family:var(--vc-font-ui);
  overflow:hidden;
  position:relative;
}
.vc-toast__accent{
  background:transparent;
  flex-shrink:0;
  width:3px;
}
.vc-toast--teal .vc-toast__accent{ background:var(--vc-accent); }
.vc-toast--teal-soft .vc-toast__accent{ background:var(--vc-teal-300); }
.vc-toast--amber .vc-toast__accent{ background:var(--vc-amber-900); }
.vc-toast__body{ flex:1; min-width:0; }
.vc-toast__row{
  align-items:flex-start;
  display:flex;
  gap:10px;
  padding:12px 12px 12px 14px;
}
.vc-toast__avatar-slot{
  flex-shrink:0;
  padding-top:1px;
}
.vc-toast__main{ flex:1; min-width:0; }

.vc-toast__lead-row{
  align-items:baseline;
  display:flex;
  gap:8px;
  margin-bottom:2px;
}

.vc-toast__lead{
  color:var(--vc-text);
  flex:1;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vc-toast__time{
  color:var(--vc-text-muted);
  flex-shrink:0;
  font-size:11px;
}

.vc-toast__preview{
  color:var(--vc-text-muted);
  font-size:13px;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vc-toast__channel--teal{ color:var(--vc-accent);     font-weight:600; }
.vc-toast__channel--amber{ color:var(--vc-amber-900);  font-weight:600; }
.vc-toast__federation{
  align-items:center;
  color:var(--vc-accent);
  display:inline-flex;
  gap:2px;
  white-space:nowrap;
}
.vc-toast__close{
  background:transparent;
  border:0;
  border-radius:10px;
  color:var(--vc-text-muted);
  cursor:pointer;
  display:grid;
  flex-shrink:0;
  height:var(--vc-hit);
  margin:-10px -8px -10px 0;
  place-items:center;
  width:var(--vc-hit);
}
.vc-toast__close:hover{ background:var(--vc-surface-recessed); }
.vc-toast__actions{
  display:flex;
  gap:8px;
  padding:0 12px 12px 14px;
}

.vc-toast__btn{
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  flex:1;
  font:600 13.5px var(--vc-font-ui);
  letter-spacing:-.005em;
  min-height:var(--vc-hit);
  padding:0 16px;
}
.vc-toast__btn--primary{
  background:var(--vc-accent);
  color:var(--vc-on-accent);
}
.vc-toast__btn--outline{
  background:transparent;
  border-color:var(--vc-hairline);
  color:var(--vc-text);
}
.vc-toast__btn--danger{
  background:transparent;
  border-color:oklch(.82 .06 25);
  color:oklch(.52 .18 25);
}
.vc-toast__glyph{
  border-radius:10px;
  display:grid;
  flex-shrink:0;
  height:36px;
  place-items:center;
  width:36px;
}
.vc-toast__glyph--amber{ background:var(--vc-amber-50);  color:var(--vc-amber-900); }
.vc-toast__glyph--teal{ background:var(--vc-teal-50);   color:var(--vc-accent); }
.vc-toast--long .vc-toast__lead,.vc-toast--long .vc-toast__preview{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:break-word;
  text-overflow:clip;
  white-space:normal;
}
.vc-toast-tray{
  align-items:center;
  background:var(--vc-surface-recessed);
  border:1px dashed var(--vc-hairline);
  border-radius:12px;
  color:var(--vc-text-muted);
  display:flex;
  font-family:var(--vc-font-ui);
  font-size:12.5px;
  gap:10px;
  padding:10px 14px;
}
.vc-toast-tray__body{ flex:1; }
.vc-toast-tray__count{
  color:var(--vc-text);
  font-weight:600;
}
.vc-toast-tray__review{
  background:transparent;
  border:0;
  color:var(--vc-accent);
  cursor:pointer;
  font:600 12px var(--vc-font-ui);
  height:28px;
  padding:0 12px;
}
@media (prefers-reduced-motion:reduce){
  .vc-toast{
    animation:vc-toast-fade .16s ease-out both !important;
    transition:none !important;
  }
}
@keyframes vc-toast-fade{
  0%{ opacity:0; }
  to{ opacity:1; }
}
.vc-empty{
  font-family:var(--vc-font-ui);
  margin:0 auto;
  max-width:480px;
  padding:48px 24px;
  text-align:center;
}
.vc-empty__art{
  display:flex;
  justify-content:center;
  margin-bottom:24px;
}
.vc-empty__art svg{ display:block; }
.vc-empty__headline{
  color:var(--vc-text);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0 0 10px;
  text-wrap:pretty;
}
.vc-empty__subtitle{
  font-size:14.5px;
  line-height:1.55;
  margin:0 auto 24px;
  text-wrap:pretty;
}
.vc-empty__federation,.vc-empty__subtitle{
  color:var(--vc-text-muted);
  max-width:380px;
}
.vc-empty__federation{
  font-size:12.5px;
  line-height:1.5;
  margin:-12px auto 24px;
}
.vc-empty__federation-name{
  color:var(--vc-accent);
  white-space:nowrap;
}
.vc-empty__cta{
  align-items:stretch;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 auto;
  max-width:320px;
}
.vc-empty__btn{
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  font:600 14px var(--vc-font-ui);
  letter-spacing:-.005em;
  min-height:var(--vc-hit);
  padding:0 18px;
}
.vc-empty__btn--primary{
  background:var(--vc-accent);
  color:var(--vc-on-accent);
}
.vc-empty__btn--outline{
  background:transparent;
  border-color:var(--vc-hairline);
  color:var(--vc-text);
}
.vc-empty__chips{
  color:var(--vc-text-muted);
  font-size:12px;
  margin-top:20px;
  text-align:center;
}
.vc-empty__chips-label{ margin-bottom:6px; }
.vc-empty__chips-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}
.vc-empty__chip{
  background:var(--vc-teal-50);
  border-radius:999px;
  color:var(--vc-accent);
  font-size:12px;
  font-weight:500;
  padding:4px 10px;
}
.vc-empty-thread{
  align-items:center;
  display:flex;
  flex-direction:column;
  font-family:var(--vc-font-ui);
  gap:14px;
  margin:0 auto;
  max-width:480px;
  padding:32px 20px;
  text-align:center;
}
.vc-empty-thread__headline{
  color:var(--vc-text);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
}
.vc-empty-thread__body{
  color:var(--vc-text-muted);
  font-size:13px;
  line-height:1.5;
  max-width:360px;
}
.vc-empty-thread__prompt{
  color:var(--vc-accent);
  font-size:12.5px;
  font-weight:500;
  margin-top:4px;
}
.vc-empty-thread__sovereignty{
  color:var(--vc-text-muted);
  font-size:12px;
  font-style:italic;
  margin-top:12px;
  max-width:360px;
  opacity:.85;
}
.vc-empty-search{
  align-items:flex-start;
  display:flex;
  font-family:var(--vc-font-ui);
  gap:12px;
  padding:20px 16px;
}
.vc-empty-search__icon{ flex-shrink:0; padding-top:2px; }
.vc-empty-search__body{ flex:1; min-width:0; }
.vc-empty-search__lead{
  color:var(--vc-text);
  font-size:13.5px;
  margin-bottom:4px;
}
.vc-empty-search__hint{
  color:var(--vc-text-muted);
  font-size:12.5px;
  line-height:1.5;
}
.vc-empty-search__hint a{ color:var(--vc-accent); }
.vc-empty-unread{
  align-items:center;
  display:flex;
  flex-direction:column;
  font-family:var(--vc-font-ui);
  gap:8px;
  padding:28px 16px;
  text-align:center;
}
.vc-empty-unread__disc{
  background:var(--vc-teal-50);
  border-radius:999px;
  display:grid;
  height:44px;
  place-items:center;
  width:44px;
}
.vc-empty-unread__lead{
  color:var(--vc-text);
  font-size:13.5px;
  font-weight:600;
}
.vc-empty-unread__body{
  color:var(--vc-text-muted);
  font-size:12.5px;
}
.vc-empty-tutorial{
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:18px;
  box-shadow:var(--vc-shadow-2);
  font-family:var(--vc-font-ui);
  max-width:420px;
  padding:28px 24px 24px;
  position:relative;
  width:100%;
}
.vc-empty-tutorial__head{
  align-items:center;
  display:flex;
  gap:14px;
  margin-bottom:18px;
}
.vc-empty-tutorial__eyebrow{
  color:var(--vc-text-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:4px;
  text-transform:uppercase;
}
.vc-empty-tutorial__headline{
  color:var(--vc-text);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:pretty;
}
.vc-empty-tutorial__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  list-style:none;
  margin:0 0 22px;
  padding:0;
}
.vc-empty-tutorial__item{
  align-items:flex-start;
  color:var(--vc-text-muted);
  display:flex;
  font-size:13.5px;
  gap:10px;
  line-height:1.5;
}
.vc-empty-tutorial__bullet{
  background:var(--vc-accent);
  border-radius:999px;
  flex-shrink:0;
  height:6px;
  margin-top:8px;
  width:6px;
}
.vc-empty-tutorial__lead{
  color:var(--vc-text);
  font-weight:600;
}
.vc-empty-tutorial__footer{
  display:flex;
  justify-content:flex-end;
}
.vc-empty-tutorial-backdrop{
  background:oklch(.22 .012 75 / .32);
  display:grid;
  inset:0;
  padding:var(--vc-gutter);
  place-items:center;
  position:fixed;
  z-index:1100;
}
@media (prefers-reduced-motion:reduce){
  .vc-empty,.vc-empty-tutorial{
    animation:none !important;
    transition:none !important;
  }
}
.chat-layout footer.vc-sovereignty,.chat-main>footer.vc-sovereignty{
  background-color:transparent;
  box-shadow:none;
  color:inherit;
  margin-top:0;
}
.vc-sovereignty__line{
  align-items:center;
  background:transparent;
  color:var(--vc-text-muted);
  cursor:pointer;
  display:flex;
  font-family:var(--vc-font-ui);
  font-size:12px;
  font-style:italic;
  gap:8px;
  justify-content:center;
  letter-spacing:-.005em;
  line-height:1.5;
  min-height:var(--vc-hit);
  padding:8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  border-top:1px solid var(--vc-hairline);
  transition:color .18s ease;
}
.vc-sovereignty__line:focus-visible,.vc-sovereignty__line:hover{
  color:var(--vc-accent);
  outline:none;
}
.vc-sovereignty__line[aria-expanded=true]{ color:var(--vc-accent); }

.vc-sovereignty__props{
  flex:1;
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vc-sovereignty__line--mobile .vc-sovereignty__props{ white-space:normal; }
.vc-sovereignty__sep{ margin:0 6px; opacity:.5; }
.vc-sovereignty__federation-name,.vc-sovereignty__prop--fed{ white-space:nowrap; }

.vc-sovereignty__caret{
  font-size:11px;
  font-style:normal;
  opacity:.6;
  transition:opacity .18s ease,transform .18s ease;
}
.vc-sovereignty__line[aria-expanded=true] .vc-sovereignty__caret{
  opacity:1;
  transform:rotate(-90deg);
}
.vc-sovereignty__line--rotate .vc-sovereignty__props{
  white-space:nowrap;
}
.vc-sovereignty__rotating{
  animation:vc-sov-rotate 18s steps(3) infinite;
  display:inline-block;
}
@keyframes vc-sov-rotate{
  0%,33%{ transform:translateY(0); }
  34%,66%{ transform:translateY(-1.5em); }
  67%,to{ transform:translateY(-3em); }
}
.vc-sovereignty__card{
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:18px;
  box-shadow:var(--vc-shadow-2);
  font-family:var(--vc-font-ui);
  max-width:calc(100vw - 24px);
  padding:20px 22px;
  position:relative;
  width:384px;
}
.vc-sovereignty__card--sheet{
  border-radius:16px 16px 0 0;
  padding:14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  width:100%;
}
.vc-sovereignty__handle{
  background:var(--vc-ink-300);
  border-radius:999px; height:6px;
  margin:0 auto 14px;
  width:40px;
}
.vc-sovereignty__card-head{
  align-items:baseline;
  display:flex;
  justify-content:space-between;
  margin-bottom:14px;
}
.vc-sovereignty__headline{
  color:var(--vc-text);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:pretty;
}
.vc-sovereignty__close{
  background:transparent;
  border:none;
  color:var(--vc-text-muted);
  cursor:pointer;
  font-size:18px; height:28px;
  line-height:1;
  padding:0;
  width:28px;
}
.vc-sovereignty__list{
  display:flex; flex-direction:column;
  gap:12px;
  list-style:none;
  margin:0; padding:0;
}
.vc-sovereignty__item{
  align-items:flex-start;
  color:var(--vc-text-muted);
  display:flex;
  font-size:13px;
  gap:10px;
  line-height:1.55;
}
.vc-sovereignty__bullet{
  background:var(--vc-accent);
  border-radius:999px;
  flex-shrink:0; height:5px;
  margin-top:8px;
  width:5px;
}
.vc-sovereignty__lead{
  color:var(--vc-text);
  font-weight:600;
}
.vc-sovereignty__card-foot{
  border-top:1px solid var(--vc-hairline);
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
  padding-top:14px;
}
.vc-sovereignty__learn{
  color:var(--vc-accent);
  font-size:12.5px;
  font-weight:500;
  text-decoration:none;
}
.vc-sovereignty__backdrop{
  background:oklch(.22 .012 75 / .32); inset:0;
  position:fixed;
  z-index:1100;
}
.vc-sovereignty__backdrop--sheet{
  align-items:flex-end;
  display:flex;
}
.vc-sovereignty__backdrop--popover{
  display:grid;
  padding:var(--vc-gutter);
  place-items:center;
}
@media (prefers-reduced-motion:reduce){
  .vc-sovereignty__caret,.vc-sovereignty__line,.vc-sovereignty__rotating{
    animation:none !important;
    transition:none !important;
  }
  .vc-sovereignty__line--rotate .vc-sovereignty__props{ white-space:normal; }
}

.vc-badge{
  align-items:center;
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-radius:var(--vc-r-pill);
  color:var(--vc-text);
  display:inline-flex;
  font:600 11px/1 var(--vc-font-ui);
  gap:6px;
  letter-spacing:.01em;
  min-height:22px;
  padding:0 9px;
  white-space:nowrap;
}

.vc-badge__icon{
  flex-shrink:0;
  height:12px;
  width:12px;
}

.vc-badge__label{ font-weight:600; }
.vc-badge__state{
  font-style:italic;
  font-weight:400;
  opacity:.85;
}
.vc-badge__state:before{ content:" · "; }
.vc-badge__assignee{
  align-items:center;
  display:inline-flex;
  font-weight:400;
  gap:4px;
  margin-left:2px;
}
.vc-badge__assignee-avatar{
  align-items:center;
  background:var(--vc-teal-100);
  border-radius:999px;
  color:var(--vc-teal-900);
  display:inline-flex;
  font-size:9px;
  font-weight:700;
  height:14px;
  justify-content:center;
  width:14px;
}
.vc-badge__due{ font-weight:400; opacity:.75; }
.vc-badge__due:before{ content:" · due "; }

.vc-badge--action,.vc-badge--motion{
  background:var(--vc-teal-50);
  border-color:var(--vc-teal-100);
  color:var(--vc-teal-900);
}

.vc-badge--amendment,.vc-badge--question{
  background:var(--vc-amber-50);
  border-color:var(--vc-amber-100);
  color:var(--vc-amber-900);
}

.vc-badge--decision{
  background:var(--vc-green-50);
}
.vc-badge--decision,.vc-badge--second{
  border-color:var(--vc-green-100);
  color:var(--vc-green-900);
}
.vc-badge--second{
  background:transparent;
}

.vc-badge--withdrawn{
  background:var(--vc-ink-100);
  border-color:var(--vc-ink-200);
  color:var(--vc-ink-700);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

.vc-badge--point{
  background:var(--vc-red-50);
  border-color:var(--vc-red-100);
  color:var(--vc-red-900);
}

.vc-role-pill{
  align-items:center;
  border:1px solid transparent;
  border-radius:var(--vc-r-pill);
  display:inline-flex;
  font:500 13px/1.2 var(--vc-font-ui);
  gap:5px;
  padding:2px 8px 2px 6px;
  vertical-align:baseline;
  white-space:nowrap;
}

.vc-role-pill__icon{
  flex-shrink:0;
  height:12px;
  width:12px;
}

.vc-role-pill__name{ font-weight:500; }
.vc-role-pill--subgroup{
  background:var(--vc-teal-50);
  color:var(--vc-teal-900);
}
.vc-role-pill--tenant-wide{
  background:var(--vc-teal-900);
  color:var(--vc-on-accent);
}
.vc-role-pill--governance{
  background:transparent;
  border-color:var(--vc-amber-500);
  color:var(--vc-amber-900);
}

.vc-motion-card{
  background:var(--vc-surface);
  border:1px solid var(--vc-hairline);
  border-left:3px solid var(--vc-green-500);
  border-radius:var(--vc-r-card);
  box-shadow:var(--vc-shadow-1);
  font-family:var(--vc-font-ui);
  max-width:343px;
  padding:14px 14px 12px;
}
@media (min-width:720px){
  .vc-motion-card{
    max-width:560px;
    padding:16px 18px 14px;
  }
}
.vc-motion-card__head{
  align-items:center;
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.vc-motion-card__title{
  color:var(--vc-text);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
  margin:0 0 10px;
  text-wrap:pretty;
}
@media (min-width:720px){
  .vc-motion-card__title{ font-size:16px; }
}
.vc-motion-card__tally{
  align-items:flex-start;
  color:var(--vc-text-muted);
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  font-size:12.5px;
  gap:6px;
  margin-bottom:10px;
}
.vc-motion-card__tally-sep{ color:var(--vc-ink-300); display:none; }
.vc-motion-card__tally-for,.vc-motion-card__tally-pass{ color:var(--vc-green-900); font-weight:600; }

@media (min-width:720px){
  .vc-motion-card__tally{
    align-items:center;
    flex-direction:row;
    gap:10px;
  }
  .vc-motion-card__tally-sep{ display:inline; }
}
.vc-motion-card__context{
  border-top:1px solid var(--vc-hairline);
  color:var(--vc-text-muted);
  font-size:12px;
  line-height:1.5;
  margin-bottom:8px;
  padding-top:10px;
}
.vc-motion-card__context-name{ color:var(--vc-text); font-weight:600; }
.vc-motion-card__foot{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  margin-top:10px;
}
.vc-motion-card__action-link{
  align-items:center;
  background:transparent;
  border:none;
  color:var(--vc-accent);
  display:inline-flex;
  min-height:32px;
  padding:0;
}
.vc-motion-card__action-link,.vc-motion-card__export{
  cursor:pointer;
  font:500 12.5px/1 var(--vc-font-ui);
}
.vc-motion-card__export{
  background:var(--vc-surface-recessed);
  border:1px solid var(--vc-hairline);
  border-radius:var(--vc-r-pill);
  color:var(--vc-text);
  min-height:36px;
  padding:0 14px;
}
.vc-motion-card__export:hover{ background:var(--vc-ink-100); }

.vc-ack{
  background:var(--vc-surface-recessed);
  border:1px solid var(--vc-hairline);
  border-radius:var(--vc-r-card);
  font-family:var(--vc-font-ui);
  max-width:480px;
  padding:14px;
}

.vc-ack--full{
  background:var(--vc-green-50);
  border-color:var(--vc-green-100);
}
.vc-ack__row{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.vc-ack--full .vc-ack__row{ margin-bottom:0; }

.vc-ack__body{ flex:1; min-width:0; }

.vc-ack__count{
  color:var(--vc-text);
  font-size:13px;
  font-weight:600;
}
.vc-ack--full .vc-ack__count{ color:var(--vc-green-900); }

.vc-ack__stamp{
  align-items:center;
  color:var(--vc-text-muted);
  display:inline-flex;
  font-size:12px;
  gap:4px;
  margin-top:2px;
}
.vc-ack__stamp-icon{
  color:var(--vc-green-900); height:11px;
  width:11px;
}

.vc-ack__button{
  background:var(--vc-accent);
  border:none;
  border-radius:var(--vc-r-pill);
  color:var(--vc-on-accent);
  cursor:pointer;
  font:600 13px/1 var(--vc-font-ui);
  min-height:var(--vc-hit);
  padding:0 18px;
}
.vc-ack__button:hover{ filter:brightness(1.05); }
.vc-ack__bar{
  background:var(--vc-ink-100);
  height:6px;
  overflow:hidden;
}
.vc-ack__bar,.vc-ack__bar-fill{
  border-radius:var(--vc-r-pill);
}
.vc-ack__bar-fill{
  background:var(--vc-accent);
  height:100%;
  transition:width .24s var(--vc-ease);
}
.vc-ack--full .vc-ack__bar{ display:none; }

@media (prefers-reduced-motion:reduce){
  .vc-ack__bar-fill{ transition:none; }
}

.vc-minutes-preview{
  background:#fffefb;
  border:1px solid var(--vc-hairline);
  border-radius:8px;
  box-shadow:var(--vc-shadow-2);
  font-family:var(--vc-font-ui);
  max-width:540px;
  padding:24px 28px;
}
.vc-minutes-preview__head{
  border-bottom:2px solid var(--vc-ink-200);
  margin-bottom:18px;
  padding-bottom:12px;
}
.vc-minutes-preview__tenant{
  color:var(--vc-text-muted);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  margin-bottom:6px;
  text-transform:uppercase;
}
.vc-minutes-preview__title{
  color:var(--vc-text);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0;
}
.vc-minutes-preview__when{
  color:var(--vc-text-muted);
  font-size:11.5px;
  margin-top:4px;
}
.vc-minutes-preview__row{
  margin-bottom:12px;
}
.vc-minutes-preview__row--indent{
  border-left:2px solid var(--vc-ink-200);
  padding-left:14px;
}
.vc-minutes-preview__meta{
  align-items:baseline;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}
.vc-minutes-preview__author{
  color:var(--vc-text);
  font-size:12.5px;
  font-weight:600;
}
.vc-minutes-preview__time{
  color:var(--vc-text-muted);
  font-size:11px;
}
.vc-minutes-preview__content{
  color:var(--vc-text);
  font-size:13px;
  line-height:1.55;
}
.vc-minutes-preview__elide{
  background:var(--vc-surface-recessed);
  border-radius:8px;
  color:var(--vc-text-muted);
  font-size:12px;
  font-style:italic;
  margin:12px 0;
  padding:12px 16px;
  text-align:center;
}
.vc-minutes-preview__actions{
  border-top:1px solid var(--vc-ink-200);
  margin-top:18px;
  padding-top:14px;
}
.vc-minutes-preview__actions-label{
  color:var(--vc-text-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:8px;
  text-transform:uppercase;
}
.vc-minutes-preview__actions-list{
  color:var(--vc-text);
  font-size:12.5px;
  line-height:1.7;
  list-style:none;
  margin:0;
  padding:0;
}
.vc-minutes-preview__actions-list li{ counter-increment:vc-minutes-actions; }
.vc-minutes-preview__actions-list{ counter-reset:vc-minutes-actions; }
.vc-minutes-preview__actions-list li:before{
  color:var(--vc-text-muted);
  content:counter(vc-minutes-actions) ". ";
}
.vc-minutes-preview__actions-list b{ color:var(--vc-text); }
.vc-minutes-preview__foot{
  border-top:1px solid var(--vc-ink-200);
  color:var(--vc-text-muted);
  font-size:10.5px;
  font-style:italic;
  margin-top:22px;
  padding-top:12px;
  text-align:center;
}

:root{
  --chat-severity-clean:#2f855a;
  --chat-severity-consideration:#c05621;
  --chat-severity-block:#c53030;
  --chat-severity-pending:#718096;
}

.chat-annotation-panel{
  background:rgba(0,0,0,.025);
  border-left:3px solid var(--chat-severity-pending);
  border-radius:4px;
  font-size:12px;
  line-height:1.4;
  margin-top:6px;
  max-width:100%;
  padding:8px 10px;
}

.chat-annotation-summary{
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:6px;
  padding-bottom:6px;
}
.chat-annotation-panel--collapsed>.chat-annotation-card,.chat-annotation-panel--collapsed>.chat-annotation-footer{
  display:none;
}

.chat-annotation-panel--collapsed>.chat-annotation-summary{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.chat-annotation-panel--collapsed>.chat-annotation-summary:after{
  content:" ▾";
  font-size:.85em;
  margin-left:4px;
  opacity:.5;
}

.chat-annotation-panel:not(.chat-annotation-panel--collapsed)>.chat-annotation-summary:after{
  content:" ▴";
  font-size:.85em;
  margin-left:4px;
  opacity:.5;
}

.chat-annotation-summary[role=button]:focus-visible{
  outline:2px solid var(--color-primary-400);
  outline-offset:2px;
}

.chat-annotation-summary-head{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.chat-annotation-summary-line{
  color:var(--vc-text, #2d3748);
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
}

.chat-annotation-summary[data-severity=clean]{
  border-left-color:var(--chat-severity-clean);
}
.chat-annotation-panel:has(.chat-annotation-summary[data-severity=clean]){
  border-left-color:var(--chat-severity-clean);
}
.chat-annotation-panel:has(.chat-annotation-summary[data-severity=consideration]){
  border-left-color:var(--chat-severity-consideration);
}
.chat-annotation-panel:has(.chat-annotation-summary[data-severity=block]){
  border-left-color:var(--chat-severity-block);
}

.chat-severity-dot{
  background:var(--chat-severity-pending);
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
  height:8px;
  width:8px;
}
.chat-severity-dot[data-severity=clean]{ background:var(--chat-severity-clean); }
.chat-severity-dot[data-severity=consideration]{ background:var(--chat-severity-consideration); }
.chat-severity-dot[data-severity=block]{ background:var(--chat-severity-block); }

.chat-annotation-severity-label{
  color:var(--vc-text, #2d3748);
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.chat-annotation-trigger{
  color:var(--vc-text-muted, #718096);
  font-size:10px;
  font-style:italic;
  margin-left:auto;
}

.chat-annotation-card{
  margin-top:4px;
  padding:0;
}

.chat-annotation-card>summary{
  align-items:center;
  cursor:pointer;
  display:flex;
  font-size:11px;
  gap:6px;
  list-style:none;
  padding:4px 0;
}

.chat-annotation-card>summary::-webkit-details-marker{
  display:none;
}

.chat-annotation-card>summary:before{
  color:var(--vc-text-muted, #718096);
  content:"▸";
  display:inline-block;
  font-size:10px;
  transition:transform .15s ease;
  width:10px;
}

.chat-annotation-card[open]>summary:before{
  transform:rotate(90deg);
}

.chat-annotation-card-title{
  color:var(--vc-text, #2d3748);
  font-size:11px;
  font-weight:600;
}

.chat-annotation-card-headline{
  color:var(--vc-text-muted, #718096);
  font-size:11px;
  margin-left:auto;
}

.chat-annotation-card-body{
  color:var(--vc-text, #2d3748);
  font-size:11.5px;
  padding:6px 0 6px 16px;
}

.chat-annotation-card-body p{
  margin:4px 0;
}

.chat-annotation-card-body ul{
  margin:4px 0;
  padding-left:18px;
}

.chat-annotation-card-body li{
  margin:2px 0;
}

.chat-annotation-empty{
  color:var(--vc-text-muted, #718096);
  font-size:11px;
  font-style:italic;
}

.chat-annotation-concerns strong,.chat-annotation-recs strong,.chat-annotation-suggestions strong{
  color:var(--vc-text, #2d3748);
  display:block;
  font-size:11px;
  margin:4px 0 2px;
}

.chat-annotation-footer{
  border-top:1px solid rgba(0,0,0,.06);
  color:var(--vc-text-muted, #a0aec0);
  font-size:10px;
  font-style:italic;
  margin-top:6px;
  padding-top:4px;
}
@media (max-width:600px){
  .chat-annotation-panel{
    font-size:11px;
    padding:6px 8px;
  }
  .chat-annotation-trigger{
    display:none;
  }
}
.thread-settings-body{
  margin:var(--spacing-3) 0;
}

.thread-settings-row{
  align-items:flex-start;
  background:var(--color-bg-secondary, #f9fafb);
  border-radius:var(--radius-md, .5rem);
  display:flex;
  gap:var(--spacing-4);
  justify-content:space-between;
  padding:var(--spacing-3);
}

.thread-settings-row-text{
  flex:1;
  min-width:0;
}

.thread-settings-label{
  color:var(--color-text-primary, #1f2937);
  cursor:pointer;
  display:block;
  font-size:.9375rem;
  font-weight:600;
  margin-bottom:var(--spacing-1);
}

.thread-settings-description{
  color:var(--color-text-secondary, #6b7280);
  font-size:.8125rem;
  line-height:1.4;
  margin:0;
}

.thread-settings-toggle{
  display:inline-block;
  flex-shrink:0;
  height:24px;
  margin-top:2px;
  position:relative;
  width:44px;
}

.thread-settings-toggle input{
  height:0;
  opacity:0;
  width:0;
}

.thread-settings-toggle-slider{
  background-color:#d1d5db;
  border-radius:24px;
  cursor:pointer;
  inset:0;
  position:absolute;
  transition:background-color .2s ease;
}

.thread-settings-toggle-slider:before{
  background-color:#fff;
  border-radius:50%;
  bottom:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  content:"";
  height:18px;
  left:3px;
  position:absolute;
  transition:transform .2s ease;
  width:18px;
}

.thread-settings-toggle input:checked+.thread-settings-toggle-slider{
  background-color:var(--vc-accent, #3b82f6);
}

.thread-settings-toggle input:checked+.thread-settings-toggle-slider:before{
  transform:translateX(20px);
}

.thread-settings-toggle input:disabled+.thread-settings-toggle-slider{
  cursor:not-allowed;
  opacity:.5;
}

.thread-settings-toggle input:focus-visible+.thread-settings-toggle-slider{
  box-shadow:0 0 0 3px rgba(59,130,246,.3);
}

.thread-settings-status{
  color:var(--color-text-secondary, #6b7280);
  font-size:.8125rem;
  margin:var(--spacing-3) 0 0 0;
  min-height:1.2em;
}

@media (prefers-color-scheme:dark){
  .thread-settings-row{
    background:var(--color-bg-tertiary, #374151);
  }
  .thread-settings-label{
    color:var(--color-text-primary, #f9fafb);
  }
  .thread-settings-description,.thread-settings-status{
    color:var(--color-text-secondary, #9ca3af);
  }
}
.chat-annotation-tension-card{
  background:rgba(255,196,87,.08);
  border:1px solid rgba(255,196,87,.35);
  border-radius:8px;
  margin:6px 0;
  padding:6px 10px;
}

.chat-annotation-tension-card .chat-annotation-card-headline{
  color:var(--vc-text, #2d3748);
  font-weight:600;
}

.chat-annotation-tension-cta{
  margin-top:8px;
}

.chat-annotation-poll-trigger{
  align-items:center;
  background:var(--vc-accent, #145b6e);
  border:none;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-size:12px;
  font-weight:500;
  gap:6px;
  padding:6px 12px;
  transition:background .15s ease,transform .1s ease;
}

.chat-annotation-poll-trigger:hover{
  background:var(--vc-accent-strong, #0f4f60);
}

.chat-annotation-poll-trigger:active{
  transform:translateY(1px);
}

.chat-annotation-poll-trigger:focus-visible{
  outline:2px solid var(--vc-accent, #145b6e);
  outline-offset:2px;
}

/*# sourceMappingURL=chat.min.css.map */