:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#101216; color:#edf0f5; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; }
button,input,select,textarea { font:inherit; border-radius:8px; border:1px solid #343a46; padding:.75rem; }
button { cursor:pointer; color:white; background:#6d5dfc; border:0; font-weight:700; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #f0c75e; outline-offset:2px;
}
input,select,textarea { color:white; background:#181b21; }
.card { width:min(420px,calc(100% - 2rem)); margin:15vh auto; padding:2rem; background:#181b21; border:1px solid #292e38; border-radius:16px; }
.card form { display:grid; gap:.75rem; }
.error { color:#ff7d89; }
.app-error { position:fixed; z-index:10; right:1rem; bottom:1rem; display:flex; align-items:center; gap:.75rem; width:min(440px,calc(100% - 2rem)); padding:.8rem 1rem; color:#fff; background:#8f2f3d; border:1px solid #ff7d89; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.app-error span { flex:1; }
.app-error button { padding:.2rem .45rem; background:transparent; }
main { height:100vh; height:100dvh; min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); transition:grid-template-columns .2s ease; }
aside { min-width:0; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; padding:1.5rem; background:#181b21; border-right:1px solid #292e38; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sidebar-header h1 { margin:0; white-space:nowrap; }
.sidebar-brand-compact,.sidebar-icon { display:none; }
#sidebar-toggle { flex:0 0 auto; padding:.35rem .6rem; background:#292e38; }
main.sidebar-collapsed { grid-template-columns:64px 1fr; }
main.sidebar-collapsed aside { padding:1rem .5rem; }
main.sidebar-collapsed .sidebar-brand-full,main.sidebar-collapsed .sidebar-label { display:none; }
main.sidebar-collapsed .sidebar-brand-compact,main.sidebar-collapsed .sidebar-icon { display:inline; }
main.sidebar-collapsed .sidebar-header { flex-direction:column; }
main.sidebar-collapsed #sidebar-toggle { transform:rotate(180deg); }
main.sidebar-collapsed aside h2,main.sidebar-collapsed .dm-create,main.sidebar-collapsed .group-create,
main.sidebar-collapsed .hidden-group-restore,
main.sidebar-collapsed #read-all-notifications,main.sidebar-collapsed #notification-list,
main.sidebar-collapsed #load-more-notifications { display:none !important; }
main.sidebar-collapsed .dm-heading,main.sidebar-collapsed .dm-order-controls { display:none !important; }
main.sidebar-collapsed nav button,main.sidebar-collapsed .sidebar-compact-item,
main.sidebar-collapsed .notification-toggle { width:100%; overflow:hidden; padding:.65rem .25rem; text-align:center; white-space:nowrap; }
main.sidebar-collapsed .sidebar-compact-item { font-size:0; }
main.sidebar-collapsed .sidebar-compact-item::before {
  content:attr(data-compact-label); font-size:1rem;
}
main.sidebar-collapsed #profile { margin-top:.8rem; color:#a99fff; }
main.sidebar-collapsed .settings-link,main.sidebar-collapsed .admin-link { margin-top:.5rem; }
main.sidebar-collapsed .secondary { margin-top:1rem; }
aside h2 { margin-top:2rem; font-size:.8rem; color:#9299a7; text-transform:uppercase; }
nav { display:grid; gap:.35rem; }
.dm-heading { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.dm-heading h2 { flex:1 0 100%; margin-bottom:.2rem; }
.dm-heading button { margin-top:0; padding:.3rem .5rem; font-size:.75rem; }
.dm-order-row { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:.2rem; }
.dm-order-row > [data-conversation-id] { width:100%; }
.dm-order-row.ordering { grid-template-columns:minmax(0,1fr) max-content; align-items:center; padding:.15rem; border:1px dashed #5145bd; border-radius:8px; }
.dm-order-row.dragging { opacity:.45; }
.dm-order-controls { display:flex; gap:.15rem; }
.dm-order-controls button { padding:.25rem .38rem; background:#292e38; font-size:.75rem; }
.dm-hide { align-self:center; padding:.25rem .4rem; color:#aeb4c0; background:transparent; font-size:.75rem; }
.dm-hide:hover { color:#fff; background:#8f2f3d; }
main.sidebar-collapsed .dm-hide { display:none; }
nav button { display:flex; align-items:center; width:100%; min-width:0; text-align:left; background:transparent; font-weight:500; }
nav button:hover,nav button.active { background:#292e38; }
nav button.unread:not(.active) { color:#fff; background:#211f35; font-weight:800; }
nav button.unread:not(.active) .nav-full-label { text-decoration:underline; text-decoration-color:#7669ef; text-decoration-thickness:2px; text-underline-offset:.22rem; }
.nav-full-label { min-width:0; overflow:hidden; flex:1 1 auto; text-overflow:ellipsis; white-space:nowrap; }
.nav-compact-label { display:none; }
.nav-unread { display:inline-block; min-width:1.35rem; flex:0 0 auto; margin-left:.35rem; padding:.08rem .32rem; color:#fff; background:#a63845; border-radius:999px; font-size:.72rem; text-align:center; }
.nav-mention { display:inline-block; min-width:1.35rem; flex:0 0 auto; margin-left:.3rem; padding:.08rem .32rem; color:#17130a; background:#f0c75e; border-radius:999px; font-size:.72rem; font-weight:900; text-align:center; }
main.sidebar-collapsed nav button { position:relative; }
main.sidebar-collapsed nav .nav-full-label { display:none; }
main.sidebar-collapsed nav .nav-compact-label { display:inline; font-size:.9rem; }
main.sidebar-collapsed nav .nav-unread { position:absolute; top:.1rem; right:.05rem; min-width:1rem; margin:0; padding:.02rem .2rem; font-size:.62rem; }
main.sidebar-collapsed nav .nav-mention { position:absolute; bottom:.1rem; left:.05rem; min-width:1rem; margin:0; padding:.02rem .2rem; font-size:.62rem; }
.presence-icon { display:inline-block; width:.65rem; height:.65rem; flex:0 0 auto; margin-left:.45rem; border:1px solid currentColor; border-radius:50%; vertical-align:middle; }
main.sidebar-collapsed nav .presence-icon { position:absolute; right:.15rem; bottom:.15rem; width:.5rem; height:.5rem; margin:0; }
.presence-icon.online { color:#35c46a; background:#35c46a; }
.presence-icon.away { color:#f0c75e; background:#f0c75e; }
.presence-icon.busy { color:#e55361; background:#e55361; }
.presence-icon.offline { color:#9299a7; background:transparent; }
.dm-create { display:flex; gap:.35rem; margin-bottom:.5rem; }
.dm-create select { min-width:0; flex:1; padding:.5rem; }
.dm-create button { padding:.5rem .7rem; }
.group-create { margin:.5rem 0; color:#aeb4c0; }
.hidden-group-restore { margin:.5rem 0; color:#aeb4c0; }
.group-create input,.group-create select,.group-create button,
.hidden-group-restore select,.hidden-group-restore button { width:100%; margin-top:.35rem; }
.group-create select { min-height:90px; }
.secondary { margin-top:2rem; background:#292e38; }
.settings-link,.admin-link { display:block; color:#a99fff; margin-top:.5rem; }
.notification-toggle { width:100%; margin-top:1rem; background:#292e38; text-align:left; }
#profile { position:relative; display:flex; align-items:center; min-width:0; gap:.15rem; margin-top:.8rem; overflow:hidden; white-space:nowrap; }
#profile { width:100%; padding:.5rem; color:#edf0f5; background:transparent; text-align:left; }
#profile:hover,#profile[aria-expanded="true"] { background:#292e38; }
#profile .presence-icon { margin:0 .45rem 0 0; }
.profile-copy { min-width:0; overflow:hidden; }
.profile-copy strong,.profile-copy small { display:block; overflow:hidden; text-overflow:ellipsis; }
.profile-copy small { margin-top:.1rem; color:#aeb4c0; font-size:.75rem; font-weight:400; }
main.sidebar-collapsed #profile .presence-icon { position:absolute; right:.1rem; bottom:.1rem; width:.5rem; height:.5rem; margin:0; }
.presence-menu { display:grid; gap:.2rem; margin-top:.25rem; padding:.35rem; background:#101216; border:1px solid #343a46; border-radius:8px; }
.presence-menu button { display:flex; align-items:center; gap:.5rem; width:100%; padding:.45rem .55rem; background:transparent; text-align:left; font-weight:500; }
.presence-menu button:hover,.presence-menu button[aria-checked="true"] { background:#292e38; }
main.sidebar-collapsed .presence-menu { padding:.2rem; }
main.sidebar-collapsed .presence-menu button { justify-content:center; padding:.45rem .2rem; }
main.sidebar-collapsed .presence-option-label { display:none; }
#notification-badge { float:right; min-width:1.4rem; padding:.1rem .35rem; background:#a63845; border-radius:999px; text-align:center; }
.notification-list { max-height:260px; overflow:auto; margin-top:.4rem; border:1px solid #292e38; border-radius:8px; }
.notification-item { display:block; width:100%; padding:.6rem; border:0; border-bottom:1px solid #292e38; border-radius:0; background:#181b21; text-align:left; font-weight:400; }
.notification-item.unread { background:#292452; }
.notification-item strong,.notification-item small { display:block; }
.notification-item small { margin-top:.2rem; color:#aeb4c0; overflow:hidden; text-overflow:ellipsis; }
.notification-more { width:100%; padding:.45rem; background:#292e38; border-radius:0 0 8px 8px; font-size:.75rem; }
.chat { display:grid; grid-template-rows:auto 1fr auto; height:100vh; }
.chat header { padding:1rem 1.5rem; border-bottom:1px solid #292e38; }
.chat-header { display:flex; gap:1rem; align-items:center; justify-content:space-between; }
.chat-header h2 { margin:0; }
.room-heading { min-width:0; }
#room-members { margin:.25rem 0 0; color:#aeb4c0; font-size:.85rem; line-height:1.4; }
#manage-group-members,#leave-group { margin-top:.5rem; padding:.35rem .6rem; }
#channel-notification-setting { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; color:#aeb4c0; font-size:.8rem; }
#channel-notification-mode { padding:.3rem .5rem; font-size:.8rem; }
#conversation-notification-setting { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; color:#aeb4c0; font-size:.8rem; }
#conversation-notification-mode { padding:.3rem .5rem; font-size:.8rem; }
.group-member-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid #292e38; }
.group-member-row button { padding:.3rem .55rem; }
.group-member-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; }
.group-name-editor { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:.5rem; margin:.4rem 0 1rem; }
.group-name-editor input { min-width:0; }
#mobile-nav-toggle { display:none; padding:.4rem .65rem; }
#search-form { display:flex; gap:.4rem; }
#search-form input { min-width:220px; }
#search-form button,#search-form select { padding:.5rem; }
#messages { overflow:auto; padding:1.5rem; }
#load-older-messages,#load-more-search { justify-self:center; margin:.6rem auto 0; padding:.4rem .8rem; }
#thread-panel { max-height:45vh; overflow:auto; padding:1rem 1.5rem; background:#151820; border-top:1px solid #5145bd; }
.thread-heading { display:flex; justify-content:space-between; align-items:center; }
.thread-heading button { padding:.3rem .5rem; background:#292e38; }
#thread-messages { padding:.75rem 0; }
#thread-form { display:grid; grid-template-columns:max-content minmax(220px,1fr) max-content max-content; grid-template-areas:"preview preview preview preview" "notice notice notice notice" "format input preview-toggle send"; gap:.5rem; align-items:start; }
#thread-preview { grid-area:preview; }
#thread-format-picker { grid-area:format; }
#thread-format-notice { grid-area:notice; }
#thread-form .mention-input-wrap { grid-area:input; }
#thread-preview-toggle { grid-area:preview-toggle; }
#thread-form > button { grid-area:send; }
#thread-form textarea { width:100%; min-height:3rem; max-height:12rem; resize:vertical; }
.message { margin-bottom:1.2rem; }
.message.system-message { padding:.55rem .75rem; color:#aeb4c0; background:#151820; border-left:3px solid #5145bd; border-radius:6px; font-size:.9rem; }
.message.system-message p { margin:.15rem 0 0; }
.message.notification-target { margin-left:-.6rem; padding-left:.6rem; border-left:3px solid #f0c75e; background:#292452; animation:notification-focus 1s ease-in-out 2; }
@keyframes notification-focus { 50% { background:#3b3470; } }
.message strong { color:#a99fff; margin-right:.5rem; }
.message time { color:#9299a7; font-size:.75rem; }
.message p { margin:.25rem 0; white-space:pre-wrap; }
.message .markdown-body { margin-top:.25rem; }
.markdown-body > :first-child { margin-top:0; }
.markdown-body > :last-child { margin-bottom:0; }
.markdown-body p { white-space:normal; }
.markdown-body a { color:#a99fff; }
.markdown-body pre,.markdown-body code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; background:#101216; border-radius:5px; }
.markdown-body code { padding:.1rem .3rem; }
.markdown-body pre { overflow:auto; padding:.75rem; }
.markdown-body pre code { padding:0; background:transparent; }
.markdown-body blockquote { margin-left:0; padding-left:.8rem; color:#aeb4c0; border-left:3px solid #5145bd; }
.message-actions { display:flex; gap:.3rem; margin-top:.3rem; }
.message-actions button { padding:.2rem .45rem; background:transparent; color:#9299a7; font-size:.75rem; }
.message-actions button.danger { color:#ff7d89; }
dialog { width:min(520px,calc(100% - 2rem)); padding:1.25rem; color:#edf0f5; background:#181b21; border:1px solid #5145bd; border-radius:10px; }
dialog::backdrop { background:rgba(0,0,0,.65); }
dialog h2 { margin-top:0; }
dialog textarea { width:100%; min-height:120px; margin-top:.4rem; resize:vertical; }
dialog select { width:100%; margin-top:.4rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.dialog-actions .secondary { margin-top:0; }
.dialog-actions .danger { background:#a63845; }
.message-target { color:#9299a7; font-size:.75rem; margin-bottom:.2rem; }
.attachments { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.attachments a { color:#a99fff; }
.attachments img { display:block; max-width:min(420px,100%); max-height:320px; border-radius:8px; }
.reactions { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem; }
.reactions button { padding:.2rem .5rem; background:#292e38; font-size:.8rem; }
.reactions button.active { background:#5145bd; }
.reactions .reaction-add { color:#aeb4c0; background:transparent; border:1px solid #3a4050; }
.reaction-picker { display:inline-flex; flex-wrap:wrap; gap:.35rem; }
.reaction-picker[hidden] { display:none; }
#message-form { display:grid; grid-template-columns:max-content minmax(220px,1fr) max-content max-content; grid-template-areas:"preview preview preview preview" "notice notice notice notice" "format input preview-toggle send" "attachment attachment attachment attachment"; gap:.75rem; align-items:start; padding:1rem 1.5rem; border-top:1px solid #292e38; }
.composer-preview { flex:1 0 100%; max-height:240px; overflow:auto; padding:.75rem; background:#151820; border:1px solid #5145bd; border-radius:8px; }
.preview-toggle { cursor:pointer; color:white; background:#292e38; font-weight:700; }
.mention-input-wrap { position:relative; min-width:0; }
#message-preview { grid-area:preview; }
#message-format-picker { grid-area:format; }
#message-format-notice { grid-area:notice; }
.format-picker { display:inline-flex; align-items:center; gap:.25rem; }
.format-picker button { min-width:2.7rem; min-height:2.5rem; padding:.4rem .55rem; border:1px solid #3a4050; background:#22262e; color:#d9dde5; font-weight:700; }
.format-picker button:hover,.format-picker button:focus-visible { border-color:#a99fff; }
.format-picker button[aria-pressed="true"] { border-color:#a99fff; background:#5145bd; color:#fff; box-shadow:0 0 0 1px #a99fff inset; }
.format-notice { margin:0; padding:.45rem .65rem; border:1px solid #b88728; border-radius:6px; background:#33270f; color:#ffe0a3; font-size:.8rem; }
#edit-message-preview { margin-top:.5rem; }
#edit-message-preview-toggle { margin-top:.5rem; }
#message-form .mention-input-wrap { grid-area:input; }
#message-preview-toggle { grid-area:preview-toggle; }
#message-form > button { grid-area:send; }
#message-input { width:100%; min-height:3rem; max-height:16rem; resize:vertical; }
.mention-list { position:absolute; z-index:6; bottom:calc(100% + .35rem); left:0; width:min(360px,100%); max-height:240px; overflow:auto; padding:.3rem; background:#181b21; border:1px solid #5145bd; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.mention-option { display:block; width:100%; padding:.55rem .65rem; color:#edf0f5; background:transparent; text-align:left; font-weight:500; }
.mention-option:hover,.mention-option.active { background:#292452; }
.mention-option small { margin-left:.4rem; color:#aeb4c0; }
#attachment-input { grid-area:attachment; width:min(420px,100%); max-width:none; }
@media (max-width:900px) {
  main { grid-template-columns:1fr; }
  main.sidebar-collapsed { grid-template-columns:1fr; }
  aside { position:fixed; z-index:4; inset:0 22% 0 0; overflow:auto; padding:1rem; border-right:1px solid #5145bd; transform:translateX(-105%); transition:transform .2s ease; }
  main.sidebar-collapsed aside { padding:1rem; }
  #sidebar-toggle { display:none; }
  main.sidebar-collapsed .sidebar-brand-full,main.sidebar-collapsed .sidebar-label { display:inline; }
  main.sidebar-collapsed .sidebar-brand-compact,main.sidebar-collapsed .sidebar-icon { display:none; }
  main.sidebar-collapsed .sidebar-header { flex-direction:row; }
  main.sidebar-collapsed aside h2,main.sidebar-collapsed .dm-create,main.sidebar-collapsed .group-create { display:revert; }
  main.sidebar-collapsed nav button { width:100%; overflow:hidden; padding:.75rem; text-align:left; white-space:normal; }
  main.sidebar-collapsed .sidebar-compact-item,main.sidebar-collapsed .notification-toggle { width:auto; overflow:visible; padding:.75rem; text-align:left; white-space:normal; }
  main.sidebar-collapsed .sidebar-compact-item { font-size:inherit; }
  main.sidebar-collapsed .sidebar-compact-item::before { content:none; }
  main.sidebar-collapsed nav .nav-full-label { display:inline; }
  main.sidebar-collapsed nav .nav-compact-label { display:none; }
  main.sidebar-collapsed nav .nav-unread { position:static; min-width:1.35rem; margin-left:.35rem; padding:.08rem .32rem; font-size:.72rem; }
  main.sidebar-collapsed nav .nav-mention { position:static; min-width:1.35rem; margin-left:.3rem; padding:.08rem .32rem; font-size:.72rem; }
  main.sidebar-collapsed nav .presence-icon { position:static; width:.65rem; height:.65rem; margin-left:.45rem; }
  main.sidebar-collapsed #read-all-notifications:not([hidden]),
  main.sidebar-collapsed #load-more-notifications:not([hidden]) { display:block !important; }
  main.sidebar-collapsed #notification-list:not([hidden]) { display:block !important; }
  main.nav-open aside { transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,.5); }
  .chat { height:100dvh; min-width:0; }
  .chat-header { align-items:stretch; flex-direction:column; padding:.75rem; }
  .chat-header h2 { font-size:1.1rem; }
  #mobile-nav-toggle { display:block; align-self:flex-start; }
  #search-form { flex-wrap:wrap; }
  #search-form input { min-width:0; flex:1 1 100%; }
  #messages { padding:1rem; }
  #message-form { grid-template-columns:1fr max-content; grid-template-areas:"preview preview" "notice notice" "format send" "input input" "preview-toggle preview-toggle" "attachment attachment"; padding:.75rem; gap:.5rem; }
  #message-form .mention-input-wrap { min-width:0; }
  #message-preview-toggle { width:100%; }
  #attachment-input { width:100%; max-width:none; }
  #thread-form { grid-template-columns:1fr max-content; grid-template-areas:"preview preview" "notice notice" "format send" "input input" "preview-toggle preview-toggle"; }
  #thread-preview-toggle { width:100%; }
  #thread-panel { padding:.75rem 1rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}