/* Discord look for the Messaging tab. Loaded AFTER style.css; only overrides colours/sizes,
   so every animation and behaviour from style.css / app.js is untouched. */

.topbar { background: #1e1f22; border-bottom: 0; height: 44px; }
.pill { background: #2b2d31; border-color: transparent; }
.pill:hover { border-color: transparent; background: #35373c; }

#pane-messaging {
  --bg0: #1e1f22; --bg-side: #2b2d31; --bg1: #313338; --bg2: #2b2d31; --bg3: #404249;
  --line: rgba(0, 0, 0, .28); --text: #dbdee1; --muted: #949ba4;
  --accent: #5865f2; --accent-hi: #4752c4; --green: #23a55a; --red: #f23f43;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
#pane-messaging { scrollbar-color: #1a1b1e #2b2d31; }
#pane-messaging ::-webkit-scrollbar { width: 14px; height: 14px; }
#pane-messaging ::-webkit-scrollbar-thumb { background: #1a1b1e; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; min-height: 40px; }
#pane-messaging ::-webkit-scrollbar-track { background: transparent; }
#pane-messaging .messages::-webkit-scrollbar-track { background: #2b2d31; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }

/* server rail */
.rail { background: #1e1f22; gap: 8px; padding: 12px 0; }
.rail-sep { width: 32px; height: 2px; background: #35363c; }
.rail-btn { background: #313338; color: #dbdee1; }
.rail-btn:hover, .rail-btn.active { border-radius: 16px; }
.rail-home { color: #dbdee1; }
.rail-home:hover, .rail-home.active, .rail-btn.active { background: #5865f2; color: #fff; }
.rail-add { color: #23a55a; }
.rail-add:hover { background: #23a55a; color: #fff; }
.rail-badge { border-color: #1e1f22; }

/* channel column */
.sidebar { width: 240px; background: #2b2d31; border-right: 0; border-top-left-radius: 8px; }
.server-head { height: 48px; padding: 0 16px; border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 1.5px 0 rgba(0, 0, 0, .06); border-top-left-radius: 8px; font-size: 16px; }
.server-name { font-weight: 600; color: #f2f3f5; }
button.server-head:hover, .server-head[aria-expanded="true"] { background: #35373c; }
.side-scroll { padding: 8px 8px 16px; }
.side-label { padding: 16px 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #949ba4; }
.cat { padding-top: 16px; }
.cat-toggle { color: #949ba4; font-weight: 600; }
.cat-toggle:hover, .cat-add:hover { color: #dbdee1; background: transparent; }
.find { background: #1e1f22; border: 0; border-radius: 4px; min-height: 28px; font-size: 14px; }
.nav-item { min-height: 34px; margin: 1px 0; padding: 6px 8px; border-radius: 4px; color: #949ba4; font-size: 16px; font-weight: 500; }
.nav-item:hover { background: #35373c; color: #dbdee1; }
.nav-item.active { background: #404249; color: #fff; }
.nav-item.unread { color: #f2f3f5; font-weight: 600; }
.nav-item .hash { color: #80848e; font-size: 20px; }
.badge { background: #f23f43; }

.userpanel { height: 52px; background: #232428; border-top: 0; padding: 0 8px; }
.up-name { font-weight: 600; font-size: 14px; color: #f2f3f5; }
.up-status { font-size: 12px; color: #b5bac1; }
.icon-action:hover { background: #35373c; }

/* server menu / context menus */
.menu { background: #111214; border: 0; border-radius: 4px; padding: 6px 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .24); }
.menu button { padding: 6px 8px; border-radius: 2px; color: #b5bac1; font-size: 14px; font-weight: 500; }
.menu button:hover, .menu button:focus-visible { background: #5865f2; color: #fff; }
.menu button.danger { color: #f23f43; }
.menu button.danger:hover, .menu button.danger:focus-visible { background: #da373c; color: #fff; }
.menu hr { background: #2b2d31; margin: 4px 0; }

/* chat */
.chat { background: #313338; }
.chat-head { height: 48px; padding: 0 16px; border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 1.5px 0 rgba(0, 0, 0, .05); position: relative; z-index: 2; }
.chat-title { font-size: 16px; font-weight: 600; color: #f2f3f5; gap: 12px; }
.chat-sub { font-size: 14px; color: #949ba4; }
.messages { padding: 16px 0 8px; }
.intro { border-bottom: 0; padding: 16px 16px 8px; margin: 0; }
.intro h2 { font-size: 32px; font-weight: 700; color: #f2f3f5; }
.intro p { font-size: 16px; color: #b5bac1; }
.day { margin: 24px 16px 8px; color: #949ba4; font-size: 12px; font-weight: 600; }
.day::before, .day::after { background: #3f4147; }
.hint { color: #949ba4; }

.msg { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 2px 48px 2px 16px; line-height: 1.375; }
.msg:not(.grouped) { margin-top: 17px; padding-top: 2px; }
.msg:hover, .msg:focus-within { background: #2e3035; }
.msg-head { gap: 8px; align-items: baseline; }
.author { font-weight: 500; font-size: 16px; color: #f2f3f5; }
.author:hover { text-decoration: underline; }
.time, .msg .hover-time { font-size: 12px; color: #949ba4; font-weight: 400; }
.text { font-size: 16px; color: #dbdee1; }
.edited { font-size: 10px; color: #949ba4; }
.avatar { width: 40px; height: 40px; }
.actions { top: -16px; right: 16px; padding: 0; background: #313338; border: 1px solid #26272b; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .2); overflow: hidden; }
.actions button { padding: 6px 10px; border-radius: 0; font-size: 13px; color: #b5bac1; }
.actions button:hover { background: #393c41; color: #dbdee1; }
.actions button.danger:hover { color: #f23f43; background: #393c41; }
.editor textarea { background: #383a40; border: 0; border-radius: 8px; }
.editor textarea:focus { box-shadow: none; }

/* composer: one rounded box, Enter sends (button only shown on phones) */
.composer { padding: 0 16px 24px; align-items: stretch; }
.composer textarea { background: #383a40; border: 0; border-radius: 8px; padding: 11px 16px; min-height: 44px; font-size: 16px; line-height: 22px; color: #dbdee1; }
.composer textarea::placeholder { color: #6d6f78; }
.composer textarea:focus { box-shadow: none; }
@media (min-width: 761px) { .composer .send { display: none; } }
@media (max-width: 760px) { .composer { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); } .composer .send { height: 44px; background: #5865f2; } }

/* server dialogs (create / join / settings) - not the repo file viewer */
.dlg:not(#repoDialog) { background: #313338; border: 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .4); }
.dlg:not(#repoDialog) .field input, .dlg:not(#repoDialog) .inline-form input, .dlg:not(#repoDialog) .copy-row input { background: #1e1f22; border: 0; border-radius: 3px; }
.dlg:not(#repoDialog) .field input:focus, .dlg:not(#repoDialog) .inline-form input:focus { box-shadow: 0 0 0 2px #5865f2; }
.dlg:not(#repoDialog) .primary { background: #5865f2; border-radius: 3px; }
.dlg:not(#repoDialog) .primary:hover:not(:disabled) { background: #4752c4; }
.dlg:not(#repoDialog) .rows { border: 0; background: #2b2d31; }
.dlg:not(#repoDialog) .rows li + li { border-top-color: #3f4147; }

/* ---- Discord font + chat polish (additive) ---- */
#pane-messaging, #pane-messaging button, #pane-messaging input, #pane-messaging textarea {
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.avatar { border-radius: 50%; }
.msg .author { cursor: pointer; }
.chat-head { gap: 12px; }
.chat-head .icon-action { color: #b5bac1; }
.chat-head .icon-action:hover { color: #f2f3f5; background: transparent; }
.nav-item .hash { font-weight: 400; }
.userpanel .up-text { cursor: default; }