: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;
}
.btn-icon-only,.input-actions-menu .voice-recorder-slot{
  align-items:center;
  display:flex;
}
.btn-icon-only{
  border-radius:var(--radius-full);
  flex-shrink:0;
  height:40px;
  justify-content:center;
  padding:0;
  width:40px;
}

.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:var(--color-text-tertiary);
  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-votes{
  color:var(--color-text-tertiary);
  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);
}
.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-duration-select,.poll-option-input,.poll-question-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-base);
  padding:var(--spacing-3);
  transition:border-color var(--transition-fast);
  width:100%;
}

.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-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:400px;
  z-index:9999;
}

.message-search-panel.open{
  right:0;
}

.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{
  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.show{
  display:block;
}

.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);
  padding:var(--spacing-2) var(--spacing-3);
  transition:background-color var(--transition-fast);
  width:100%;
}

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

.chat-more-menu-item svg{
  color:var(--color-text-secondary);
  flex-shrink:0;
}
.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:36px;
    padding:.375rem .625rem;
    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;
}
#videoCallContainer{
  transition:width .2s ease;
}

@media (max-width:768px){
  #videoCallContainer{
    width:320px !important;
  }
}

@media (max-width:480px){
  #videoCallContainer{
    bottom:auto !important;
    left:0 !important;
    max-height:50vh !important;
    right:0 !important;
    top:60px !important;
    width:100% !important;
  }
}

#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;
  }
}

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