:root {
  --aubergine: #123f2d;
  --aubergine-deep: #08271d;
  --aubergine-soft: #1f5d45;
  --ink: #1d1c1d;
  --muted: #69666a;
  --line: #e6e3e7;
  --paper: #ffffff;
  --green: #287a50;
  --shadow: 0 18px 60px rgba(5, 35, 24, 0.22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #fff; color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(73, 143, 255, .38); outline-offset: 1px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spin { animation: spin .8s linear infinite; }
.glyph { width: 18px; display: inline-grid; place-items: center; flex: 0 0 18px; font-size: 15px; line-height: 1; font-style: normal; }
.glyph.small { width: 14px; flex-basis: 14px; font-size: 12px; }
.glyph-button { font-weight: 800; }
.folder-glyph { color: #e3b35a; }
.topbar .glyph { color: inherit; }
.local-mode-note { margin: 9px 10px 2px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.055); font-size: 10px; line-height: 1.4; }
.local-mode-note strong { color: #fff; }
.attachment-preview-fallback { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 5px; color: #315f4b; background: #e5f0e9; font-size: 15px; }
.modal label.inline-label { flex-direction: row; align-items: center; justify-content: space-between; }
.static-reset { margin-top: 8px; border: 0; color: #786f7c; background: transparent; cursor: pointer; font-size: 11px; text-decoration: underline; }
.static-reset:hover { color: #123f2d; }
@keyframes spin { to { transform: rotate(360deg); } }

.app-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 15px; background: radial-gradient(circle at 50% 35%, #f8f0fa, #fff 45%); }
.brand-mark { display: grid; place-items: center; color: #fff; background: var(--aubergine); border-radius: 11px; font-weight: 800; box-shadow: 0 7px 24px rgba(61,29,79,.22); }
.brand-mark.large { width: 46px; height: 46px; font-size: 21px; }
.loading-copy { display: flex; flex-direction: column; gap: 3px; }
.loading-copy strong { font-size: 17px; }
.loading-copy span { color: var(--muted); font-size: 13px; }

.chat-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr); height: 100vh; min-height: 600px; background: var(--paper); }
.topbar { grid-column: 1 / -1; display: grid; grid-template-columns: 268px 36px minmax(260px, 650px) 36px 36px; align-items: center; justify-content: center; gap: 9px; height: 40px; color: #fff; background: var(--aubergine-deep); border-bottom: 1px solid rgba(255,255,255,.08); padding-right: 18px; z-index: 12; }
.history-button, .topbar-icon { width: 32px; height: 32px; border: 0; display: grid; place-items: center; border-radius: 7px; background: transparent; color: rgba(255,255,255,.76); cursor: pointer; }
.history-button:hover, .topbar-icon:hover { background: rgba(255,255,255,.1); color: #fff; }
.notification-toggle.muted { color: #f0c0c8; background: rgba(190,65,84,.18); }
.global-search { height: 28px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.13); color: rgba(255,255,255,.86); border-radius: 7px; padding: 0 10px; display: flex; align-items: center; gap: 9px; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.global-search:hover { background: rgba(255,255,255,.19); }
.global-search span { flex: 1; text-align: left; font-size: 13px; }
kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; color: inherit; font-size: 10px; font-family: inherit; background: rgba(0,0,0,.08); }

.sidebar { grid-column: 1; grid-row: 2; display: flex; min-width: 0; flex-direction: column; color: rgba(255,255,255,.9); background: var(--aubergine); border-right: 1px solid #082b1e; overflow: hidden; z-index: 10; }
.workspace-head { height: 61px; display: flex; align-items: center; gap: 9px; padding: 0 11px 0 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.workspace-logo { position: relative; width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.workspace-logo img { position: absolute; top: -14px; left: 50%; width: 90px; max-width: none; height: auto; transform: translateX(-50%); }
.workspace-title { border: 0; background: transparent; color: #fff; font-weight: 760; display: flex; align-items: center; gap: 5px; min-width: 0; cursor: pointer; padding: 0; text-align: left; }
.workspace-title-copy { min-width: 0; display: flex; flex-direction: column; }
.workspace-title-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.05; }
.workspace-title-copy small { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 9px; font-weight: 550; letter-spacing: .02em; }
.compose-button { margin-left: auto; border: 0; background: #fff; color: var(--aubergine); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.compose-button:hover { transform: translateY(-1px); }
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 8px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.side-link, .channel-button, .subchannel { border: 0; color: inherit; background: transparent; cursor: pointer; }
.side-link { width: 100%; height: 30px; display: grid; grid-template-columns: 21px 1fr auto; align-items: center; gap: 7px; border-radius: 5px; padding: 0 10px; text-align: left; font-size: 14px; }
.side-link:hover, .channel-row:hover, .subchannel:hover { background: rgba(255,255,255,.08); }
.side-badge { min-width: 20px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; background: #cd4f63; color: #fff; font-size: 11px; font-weight: 700; }
.channel-section { margin-top: 17px; }
.direct-section { margin-top: 18px; }
.admin-tag { min-width: 36px; padding: 2px 5px; border-radius: 8px; color: #dff4e7; background: rgba(255,255,255,.12); text-align: center; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.section-heading { display: flex; height: 28px; align-items: center; padding: 0 6px 0 10px; color: rgba(255,255,255,.73); font-weight: 680; font-size: 13px; letter-spacing: .01em; }
.section-heading button { margin-left: auto; width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 5px; color: inherit; background: transparent; cursor: pointer; }
.section-heading button:hover { color: #fff; background: rgba(255,255,255,.1); }
.channel-row { height: 30px; display: flex; align-items: center; border-radius: 5px; }
.channel-row.active, .subchannel.active { color: #fff; background: #2d6a4f; }
.channel-row.unread:not(.active), .subchannel.unread:not(.active), .direct-message-button.unread:not(.active) { color: #fff; background: rgba(255,255,255,.13); font-weight: 800; }
.unread-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-left: auto; border-radius: 50%; background: #74e3a5; box-shadow: 0 0 0 3px rgba(116,227,165,.13); }
.channel-caret { width: 26px; height: 30px; display: grid; place-items: center; flex: 0 0 26px; border: 0; color: rgba(255,255,255,.72); background: transparent; cursor: pointer; }
.channel-caret-spacer { width: 26px; }
.channel-button { height: 100%; flex: 1; min-width: 0; padding: 0 7px 0 0; display: flex; align-items: center; gap: 7px; text-align: left; font-size: 14px; }
.channel-button span, .subchannel span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subchannel { width: 100%; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 44px; border-radius: 5px; color: rgba(255,255,255,.78); text-align: left; font-size: 13px; position: relative; }
.sub-line { position: absolute; left: 23px; top: -4px; height: 19px; width: 11px; border-left: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0 0 0 5px; }
.direct-message-button { width: 100%; height: 34px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; border-radius: 6px; padding: 0 9px; color: rgba(255,255,255,.8); background: transparent; cursor: pointer; text-align: left; }
.direct-message-button:hover { color: #fff; background: rgba(255,255,255,.08); }
.direct-message-button.active { color: #fff; background: #2d6a4f; }
.direct-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 7px; font-weight: 850; }
.direct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sidebar-footer { min-height: 58px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; padding: 8px 12px; gap: 8px; background: rgba(0,0,0,.09); }
.profile-chip { min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: #fff; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; }
.profile-copy { display: flex; min-width: 0; flex-direction: column; }
.profile-copy strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.67); font-size: 11px; }
.profile-copy i { width: 7px; height: 7px; border-radius: 50%; background: #36c98f; }
.huddle-button { width: 33px; height: 33px; border: 0; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.09); color: rgba(255,255,255,.85); cursor: pointer; }
.huddle-button:hover { background: rgba(255,255,255,.16); }

.conversation { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: grid; grid-template-rows: 61px minmax(0, 1fr) auto; background: #fff; }
.channel-header { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--line); padding: 0 18px 0 21px; box-shadow: 0 1px 1px rgba(20,13,23,.03); z-index: 2; }
.mobile-menu { display: none; border: 0; background: transparent; cursor: pointer; padding: 5px; }
.channel-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.channel-title-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.channel-title-line h1 { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 790; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-identity p { margin: 0; color: #6a676c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.header-actions > button { height: 34px; border: 1px solid transparent; border-radius: 7px; background: transparent; display: flex; align-items: center; gap: 4px; color: #57535a; cursor: pointer; padding: 0 8px; }
.header-actions > button:hover { background: #f7f6f7; border-color: #ebe8ec; }
.member-stack { padding-left: 6px !important; border-color: var(--line) !important; }
.mini-avatar { width: 22px; height: 22px; margin-right: -8px; border: 2px solid #fff; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 7px; font-weight: 800; }
.member-stack strong { margin-left: 9px; font-size: 12px; }
.action-label { font-size: 12px; }

.message-pane { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 20px; scrollbar-width: thin; scrollbar-color: #c7c3c9 transparent; scroll-behavior: smooth; }
.channel-intro { padding: 48px 28px 26px; max-width: 840px; }
.intro-hash { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--aubergine); background: #e6f1e9; margin-bottom: 14px; }
.channel-intro h2 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.02em; }
.channel-intro p { margin: 0; color: var(--muted); font-size: 14px; }
.date-divider { display: flex; align-items: center; margin: 8px 0 10px; color: #5e5a60; font-size: 11px; font-weight: 710; }
.date-divider::before, .date-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.date-divider span { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.message-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; padding: 7px 21px; position: relative; }
.message-row:hover { background: #f8f7f8; }
.message-actions { position: absolute; right: 23px; top: -12px; display: none; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 3px 12px rgba(25,17,28,.09); overflow: hidden; }
.message-row:hover .message-actions, .message-row:focus-within .message-actions { display: flex; }
.message-actions button { width: 34px; height: 30px; display: grid; place-items: center; border: 0; background: #fff; color: #5c5960; cursor: pointer; }
.message-actions button:hover { background: #f1eff2; }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 820; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.avatar.small { width: 32px; height: 32px; border-radius: 8px; font-size: 9px; }
.avatar-coral { background: linear-gradient(145deg, #e26f6d, #c44960); }
.avatar-blue { background: linear-gradient(145deg, #5f94d7, #3c65ab); }
.avatar-gold { background: linear-gradient(145deg, #e0ad47, #b97e26); }
.avatar-mint { background: linear-gradient(145deg, #50a98a, #26755e); }
.avatar-lilac { background: linear-gradient(145deg, #9c78c2, #654993); }
.message-content { min-width: 0; padding-top: 1px; }
.message-meta { display: flex; align-items: baseline; gap: 7px; line-height: 1.2; }
.message-meta strong { font-size: 13px; font-weight: 760; }
.message-meta time { color: #8d888f; font-size: 10px; }
.edited-label { color: #8d888f; font-size: 9px; font-style: italic; }
.message-content > p { margin: 4px 0 1px; color: #302d31; font-size: 13px; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-loading { height: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 13px; }
.empty-channel { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #e6f1e9; color: var(--aubergine); }
.empty-channel h2 { margin: 18px 0 7px; font-size: 22px; }
.empty-channel p { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; }

.file-attachment { margin-top: 9px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; align-items: center; gap: 9px; max-width: 390px; min-height: 56px; padding: 8px 11px 8px 8px; border: 1px solid #ddd9df; border-radius: 9px; color: inherit; background: #fff; text-decoration: none; }
.file-attachment:not(.disabled):hover { border-color: #8c7898; box-shadow: 0 2px 8px rgba(35,21,39,.08); }
.file-attachment.disabled { cursor: default; }
.file-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #b33e52; background: #fff0f2; }
.file-attachment > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.file-attachment strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.file-attachment small { color: #777278; font-size: 10px; margin-top: 2px; }
.image-attachment { display: block; max-width: 420px; margin-top: 9px; text-decoration: none; color: #656066; font-size: 10px; }
.image-attachment img { display: block; max-width: 100%; max-height: 300px; border: 1px solid var(--line); border-radius: 10px; object-fit: cover; background: #f5f3f5; }
.image-attachment span { display: block; margin-top: 5px; }
.video-attachment { max-width: 440px; margin-top: 9px; color: #656066; font-size: 10px; }
.video-attachment video { display: block; width: 100%; max-height: 310px; border-radius: 10px; background: #171319; }
.video-attachment span { display: flex; align-items: center; gap: 5px; margin-top: 5px; }

.composer-wrap { position: relative; padding: 8px 20px 12px; background: #fff; }
.composer { border: 1px solid #a9a5aa; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.composer:focus-within { border-color: #6c6870; box-shadow: 0 0 0 1px #6c6870; }
.composer textarea { display: block; width: 100%; min-height: 46px; max-height: 130px; resize: none; border: 0; outline: 0; padding: 11px 13px 4px; color: var(--ink); background: transparent; font-size: 13px; line-height: 1.4; }
.composer textarea::placeholder { color: #8b878d; }
.composer-tools { min-height: 38px; display: flex; align-items: center; padding: 2px 7px 5px; }
.format-tools { display: flex; align-items: center; gap: 1px; }
.format-tools button { width: 31px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #646066; cursor: pointer; }
.format-tools button:hover { color: #2d292e; background: #f1eff2; }
.tool-divider { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.send-button { margin-left: auto; width: 34px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #fff; background: var(--green); cursor: pointer; }
.send-button:hover:not(:disabled) { background: #146b4b; }
.send-button:disabled { color: #9d999e; background: #eeecee; cursor: default; }
.composer-hint { margin: 5px 3px 0; color: #918c92; text-align: right; font-size: 9px; }
.composer-hint strong { font-weight: 650; }
.pending-files { display: flex; gap: 7px; padding: 9px 10px 2px; overflow-x: auto; }
.pending-file { min-width: 180px; max-width: 230px; height: 49px; display: grid; grid-template-columns: 33px minmax(0,1fr) 22px; align-items: center; gap: 7px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: #f9f8f9; }
.pending-file img { width: 33px; height: 33px; border-radius: 5px; object-fit: cover; }
.pending-file > span { min-width: 0; display: flex; flex-direction: column; }
.pending-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.pending-file small { color: var(--muted); font-size: 9px; }
.pending-file button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #787379; cursor: pointer; }
.pending-file button:hover { background: #ebe8ec; }
.drop-overlay { position: absolute; inset: -1px 19px 10px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 9px; border: 2px dashed #3e7c5d; border-radius: 10px; background: rgba(239,248,242,.96); color: var(--aubergine); font-size: 13px; font-weight: 720; pointer-events: none; }

.modal-layer, .search-layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: rgba(20,12,24,.46); backdrop-filter: blur(3px); animation: fade-in .16s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.modal { position: relative; width: min(490px, 100%); border-radius: 16px; background: #fff; padding: 27px 29px 29px; box-shadow: var(--shadow); animation: modal-in .19s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-close { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #6f6a70; cursor: pointer; }
.modal-close:hover { background: #f1eff2; }
.modal-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--aubergine); background: #e6f1e9; }
.modal h2 { margin: 16px 0 6px; font-size: 23px; letter-spacing: -.02em; }
.modal > p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.modal form { display: flex; flex-direction: column; gap: 15px; }
.modal label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; }
.modal label > span { margin-left: 4px; color: #908b91; font-weight: 450; }
.modal input, .modal select { width: 100%; height: 42px; border: 1px solid #bcb8be; border-radius: 7px; padding: 0 11px; color: var(--ink); background: #fff; font-size: 13px; }
.modal input:focus, .modal select:focus { border-color: #367553; box-shadow: 0 0 0 2px rgba(54,117,83,.14); outline: none; }
.modal-tip { display: flex; align-items: flex-start; gap: 9px; margin-top: -3px; padding: 10px 11px; border-radius: 7px; color: #405f4e; background: #edf6f0; font-size: 11px; line-height: 1.4; }
.modal-tip svg { flex: 0 0 auto; }
.primary-button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 7px; color: #fff; background: var(--aubergine); cursor: pointer; font-size: 13px; font-weight: 730; }
.primary-button:hover { background: #082f20; }
.profile-modal { text-align: center; max-width: 420px; }
.profile-avatar { width: 66px; height: 66px; margin: 2px auto 0; border-radius: 17px; font-size: 17px; }
.profile-modal form { text-align: left; }

.search-layer { align-items: start; padding-top: min(15vh, 130px); }
.search-dialog { width: min(600px, 100%); max-height: 70vh; border-radius: 13px; background: #fff; box-shadow: var(--shadow); overflow: hidden; animation: modal-in .16s ease-out; }
.search-field { height: 58px; display: flex; align-items: center; gap: 11px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; }
.search-field button { border: 0; background: transparent; color: #777278; cursor: pointer; }
.search-field kbd { border-color: #d8d4da; background: #f4f2f4; }
.search-results { max-height: calc(70vh - 58px); overflow-y: auto; padding: 10px; }
.search-label { display: block; padding: 5px 8px 8px; color: #89848a; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.search-results > button { width: 100%; min-height: 54px; display: grid; grid-template-columns: 35px minmax(0,1fr) 20px; align-items: center; gap: 10px; border: 0; border-radius: 8px; padding: 7px 9px; background: #fff; cursor: pointer; text-align: left; }
.search-results > button:hover { background: #f5f2f6; }
.search-result-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; color: var(--aubergine); background: #e6f1e9; }
.search-results > button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.search-results strong { font-size: 13px; }
.search-results small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; margin-top: 2px; }
.no-results { margin: 20px; color: var(--muted); text-align: center; font-size: 13px; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%); min-height: 38px; max-width: min(420px, calc(100vw - 30px)); display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 8px 13px; color: #fff; background: #242025; box-shadow: 0 8px 28px rgba(0,0,0,.24); font-size: 12px; animation: toast-in .2s ease-out; }
.toast.success { background: #176c4d; }
.toast.error { background: #a3384b; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.sidebar-scrim { display: none; }

body[data-theme="dark"] {
  --ink: #edf5f0;
  --muted: #9aada2;
  --line: #2a4035;
  --paper: #101a15;
  --shadow: 0 18px 60px rgba(0, 0, 0, .38);
  color-scheme: dark;
  background: #0b120e;
}
body[data-theme="dark"] .chat-shell,
body[data-theme="dark"] .conversation,
body[data-theme="dark"] .channel-header,
body[data-theme="dark"] .message-pane,
body[data-theme="dark"] .composer-wrap,
body[data-theme="dark"] .composer,
body[data-theme="dark"] .composer textarea,
body[data-theme="dark"] .date-divider span,
body[data-theme="dark"] .message-actions,
body[data-theme="dark"] .message-actions button,
body[data-theme="dark"] .file-attachment,
body[data-theme="dark"] .modal,
body[data-theme="dark"] .search-dialog,
body[data-theme="dark"] .search-field,
body[data-theme="dark"] .search-results > button {
  background: #101a15;
}
body[data-theme="dark"] .sidebar { background: #0e3526; border-right-color: #061d15; }
body[data-theme="dark"] .topbar { background: #061e16; }
body[data-theme="dark"] .message-row:hover,
body[data-theme="dark"] .search-results > button:hover { background: #17241d; }
body[data-theme="dark"] .message-content > p { color: #dde9e2; }
body[data-theme="dark"] .channel-identity p,
body[data-theme="dark"] .file-attachment small,
body[data-theme="dark"] .image-attachment,
body[data-theme="dark"] .video-attachment { color: #9aada2; }
body[data-theme="dark"] .member-stack,
body[data-theme="dark"] .composer,
body[data-theme="dark"] .file-attachment,
body[data-theme="dark"] .pending-file,
body[data-theme="dark"] .modal input,
body[data-theme="dark"] .modal select { border-color: #354d41; }
body[data-theme="dark"] .mini-avatar { border-color: #101a15; }
body[data-theme="dark"] .pending-file,
body[data-theme="dark"] .modal input,
body[data-theme="dark"] .modal select,
body[data-theme="dark"] .search-field kbd { background: #17241d; color: #edf5f0; }
body[data-theme="dark"] .intro-hash,
body[data-theme="dark"] .empty-icon,
body[data-theme="dark"] .modal-icon,
body[data-theme="dark"] .search-result-icon,
body[data-theme="dark"] .attachment-preview-fallback { background: #1b392b; color: #8fc9a8; }
body[data-theme="dark"] .modal-tip { background: #152a20; color: #b2c7ba; }
body[data-theme="dark"] .drop-overlay { background: rgba(13, 38, 27, .96); border-color: #67a681; color: #dff3e6; }
body[data-theme="dark"] .tool-divider,
body[data-theme="dark"] .date-divider::before,
body[data-theme="dark"] .date-divider::after { background: #2a4035; }
body[data-theme="dark"] .format-tools button:hover,
body[data-theme="dark"] .pending-file button:hover,
body[data-theme="dark"] .modal-close:hover { background: #22342a; color: #fff; }
body[data-theme="dark"] .send-button:disabled { background: #26372e; color: #75887d; }
body[data-theme="dark"] .toast { color-scheme: light; }

@media (max-width: 760px) {
  .chat-shell { grid-template-columns: 1fr; grid-template-rows: 40px minmax(0,1fr); min-height: 540px; }
  .topbar { grid-template-columns: 0 32px minmax(0,1fr) 32px 32px; padding: 0 8px; gap: 6px; }
  .topbar-spacer { width: 0; }
  .global-search kbd { display: none; }
  .sidebar { position: fixed; left: 0; top: 40px; bottom: 0; width: min(310px, 86vw); transform: translateX(-104%); transition: transform .22s ease; box-shadow: 8px 0 34px rgba(17,7,22,.25); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim { display: block; position: fixed; z-index: 8; inset: 40px 0 0; border: 0; background: rgba(20,12,24,.35); }
  .conversation { grid-column: 1; grid-row: 2; }
  .mobile-menu { display: grid; place-items: center; margin-right: 5px; }
  .channel-header { padding: 0 10px; }
  .channel-identity p { max-width: 42vw; }
  .member-stack .mini-avatar:nth-child(2), .member-stack .mini-avatar:nth-child(3), .header-actions > button:last-child { display: none; }
  .member-stack { padding-right: 8px !important; }
  .message-row { padding-left: 13px; padding-right: 13px; }
  .channel-intro { padding: 34px 17px 22px; }
  .composer-wrap { padding: 7px 10px 10px; }
  .tool-divider { display: none; }
  .composer-hint { display: none; }
  .drop-overlay { inset: 0 9px 9px; }
}

@media (max-width: 420px) {
  .global-search span { font-size: 11px; }
  .header-actions > button:not(.member-stack):not(.pin-header-button):not(:last-child) { display: none; }
  .channel-title-line h1 { max-width: 38vw; }
  .message-row { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .avatar { width: 34px; height: 34px; border-radius: 9px; }
  .message-row .message-actions { display: flex !important; top: 4px; right: 9px; }
  .message-row:not(.own-message) .message-content { padding-right: 66px; }
  .own-message .message-content { padding-right: 132px; }
  .modal { padding: 24px 20px; }
  .pending-file { min-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Supabase authentication and role-aware workspace additions */
.auth-screen { min-height: 100vh; overflow: auto; display: grid; place-items: center; padding: 70px 22px 34px; background: radial-gradient(circle at 50% 5%, #edf6f0 0, #f8fbf9 38%, #fff 72%); }
.auth-theme-row { position: fixed; z-index: 2; top: 20px; right: 22px; }
.auth-theme-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d8e5dc; border-radius: 50%; color: #164b36; background: rgba(255,255,255,.88); cursor: pointer; box-shadow: 0 5px 20px rgba(7,48,31,.08); }
.auth-card { width: min(440px, 100%); padding: 31px; border: 1px solid #dfe9e2; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 26px 80px rgba(7,48,31,.14); }
.auth-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 29px; }
.auth-logo { position: relative; width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; border: 1px solid #e2eae5; border-radius: 15px; background: #fff; }
.auth-logo img { position: absolute; top: -23px; left: 50%; width: 145px; max-width: none; transform: translateX(-50%); }
.auth-brand h1 { margin: 0; color: #123f2d; font-size: 23px; letter-spacing: -.03em; }
.auth-brand p { margin: 4px 0 0; color: #758278; font-size: 12px; }
.auth-heading { margin-bottom: 17px; }
.auth-heading h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.02em; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 7px; color: #314039; font-size: 12px; font-weight: 710; }
.auth-form input { width: 100%; height: 44px; border: 1px solid #b8c6bd; border-radius: 8px; padding: 0 12px; color: #17251e; background: #fff; }
.auth-form input:focus { border-color: #287a50; outline: 0; box-shadow: 0 0 0 3px rgba(40,122,80,.13); }
.auth-submit { margin-top: 2px; }
.auth-submit:disabled, .primary-button:disabled { opacity: .58; cursor: wait; }
.auth-foot { margin: 24px 0 0; color: #849087; text-align: center; font-size: 10px; }
.config-alert { display: flex; flex-direction: column; gap: 4px; margin: -10px 0 20px; padding: 12px 13px; border: 1px solid #e5c46a; border-radius: 9px; color: #694f0c; background: #fff9e8; font-size: 11px; line-height: 1.45; }
.config-alert code { padding: 1px 4px; border-radius: 4px; background: rgba(105,79,12,.09); }
.form-error { margin: 0; padding: 9px 10px; border-radius: 7px; color: #8e2435; background: #fff0f2; font-size: 11px; line-height: 1.4; }
.password-rule { margin: -5px 0 0; color: #7b877f; font-size: 10px; }
.role-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; color: #315b44; background: #e7f2eb; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.role-pill.admin { color: #694d0d; background: #fff1c9; }
.secondary-button { width: 100%; min-height: 40px; margin-top: 10px; border: 1px solid #cac6cb; border-radius: 7px; color: #544f55; background: #fff; cursor: pointer; font-size: 12px; font-weight: 690; }
.secondary-button:hover { background: #f6f4f6; }
.members-modal { max-width: 500px; }
.add-member-button { width: 100%; margin: -5px 0 13px; }
.members-list { max-height: min(480px, 56vh); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.member-row { min-height: 55px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.member-row:hover { background: #f6f8f6; }
.member-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.member-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.member-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--muted); font-size: 10px; }
.message-member-button { min-height: 28px; border: 1px solid #c9d6cd; border-radius: 6px; padding: 0 8px; color: #24583e; background: #fff; cursor: pointer; font-size: 9px; font-weight: 750; }
.message-member-button:hover { border-color: #287a50; background: #edf6f0; }
.channel-empty { margin: 8px 10px; color: rgba(255,255,255,.62); font-size: 11px; }
.empty-message-note { margin: 0 28px 22px; color: var(--muted); font-size: 12px; }
.attachment-holder { min-height: 45px; margin-top: 7px; }
.attachment-holder > .attachment-preview-fallback { animation: spin .8s linear infinite; }
.member-created-modal { max-width: 440px; text-align: center; }
.success-check { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 2px; border-radius: 50%; color: #fff; background: #287a50; font-size: 25px; font-weight: 800; box-shadow: 0 9px 26px rgba(40,122,80,.22); }
.credential-card { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 18px 0 15px; padding: 15px; border: 1px solid #dce7df; border-radius: 10px; background: #f6faf7; text-align: left; }
.credential-card > span { margin-top: 5px; color: #6e7e74; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.credential-card > strong { overflow-wrap: anywhere; color: #173c2b; font-size: 13px; }
.credential-password-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.credential-password-row input { min-width: 0; height: 40px; border: 1px solid #b8c8be; border-radius: 7px; padding: 0 10px; color: #173c2b; background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.credential-password-row button { min-width: 65px; border: 0; border-radius: 7px; color: #fff; background: #287a50; cursor: pointer; font-size: 11px; font-weight: 750; }
.credential-password-row button:hover { background: #17613f; }
.crm-modal { width: min(920px, 100%); max-height: min(760px, 90vh); overflow: hidden; display: flex; flex-direction: column; }
.crm-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding-right: 45px; }
.crm-title-row h2 { margin: 3px 0 4px; }
.crm-title-row p { margin: 0; color: var(--muted); font-size: 12px; }
.eyebrow { color: #287a50; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.compact-button { min-height: 36px; flex: 0 0 auto; padding: 0 14px; }
.crm-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.crm-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #dfe7e2; border-radius: 11px; overflow: hidden; background: #f9fbfa; }
.crm-panel-head { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border-bottom: 1px solid #dfe7e2; background: #f2f7f4; }
.crm-panel-head h3 { margin: 0; font-size: 13px; }
.crm-panel-head span { min-width: 23px; height: 20px; display: grid; place-items: center; border-radius: 10px; color: #315b44; background: #dfece4; font-size: 9px; font-weight: 800; }
.crm-list { min-height: 240px; max-height: 470px; overflow-y: auto; padding: 7px; }
.crm-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 56px; padding: 7px 8px; border-radius: 8px; }
.crm-row:hover { background: #eef4f0; }
.crm-row-copy { min-width: 0; display: flex; flex-direction: column; }
.crm-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.crm-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--muted); font-size: 9px; }
.crm-status { padding: 4px 7px; border-radius: 999px; color: #416052; background: #e4ede7; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.crm-status.active { color: #17613f; background: #dcefe3; }
.crm-status.lead { color: #77580c; background: #fff0bd; }
.crm-status.on-hold { color: #6d506c; background: #f1e5f1; }
.crm-empty { display: grid; place-items: center; min-height: 150px; padding: 24px; color: var(--muted); text-align: center; font-size: 11px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.modal textarea { width: 100%; border: 1px solid #bcb8be; border-radius: 7px; padding: 10px 11px; color: var(--ink); background: #fff; resize: vertical; font-size: 13px; }

body[data-theme="dark"] .auth-screen { background: radial-gradient(circle at 50% 5%, #153526 0, #0c1711 48%, #08100c 100%); }
body[data-theme="dark"] .auth-card { border-color: #294437; background: rgba(16,26,21,.97); box-shadow: 0 26px 80px rgba(0,0,0,.4); }
body[data-theme="dark"] .auth-theme-button { border-color: #355344; color: #d7e9de; background: #14251c; }
body[data-theme="dark"] .auth-brand h1 { color: #e4f2e9; }
body[data-theme="dark"] .auth-brand p,
body[data-theme="dark"] .auth-foot,
body[data-theme="dark"] .password-rule { color: #8fa196; }
body[data-theme="dark"] .auth-form label { color: #d7e4dc; }
body[data-theme="dark"] .auth-form input { border-color: #3c5548; color: #edf5f0; background: #14231b; }
body[data-theme="dark"] .config-alert { border-color: #705b28; color: #e6cf91; background: #2a2413; }
body[data-theme="dark"] .form-error { color: #ffc8d0; background: #421c23; }
body[data-theme="dark"] .secondary-button { border-color: #3c5146; color: #dce8e0; background: #15231b; }
body[data-theme="dark"] .secondary-button:hover,
body[data-theme="dark"] .member-row:hover { background: #1a2b22; }
body[data-theme="dark"] .role-pill { color: #b8d9c5; background: #1d3d2d; }
body[data-theme="dark"] .role-pill.admin { color: #f2d88f; background: #443612; }
body[data-theme="dark"] .credential-card { border-color: #345043; background: #14251c; }
body[data-theme="dark"] .credential-card > strong { color: #e2efe7; }
body[data-theme="dark"] .credential-password-row input { border-color: #3d5b4b; color: #eef7f1; background: #0f1c15; }
body[data-theme="dark"] .message-member-button { border-color: #3c5548; color: #cfe5d7; background: #15231b; }
body[data-theme="dark"] .message-member-button:hover { background: #1d3427; }
body[data-theme="dark"] .crm-panel { border-color: #30483b; background: #121f18; }
body[data-theme="dark"] .crm-panel-head { border-color: #30483b; background: #182820; }
body[data-theme="dark"] .crm-row:hover { background: #1a2b22; }
body[data-theme="dark"] .crm-panel-head span { color: #b8d6c3; background: #254032; }
body[data-theme="dark"] .crm-status { color: #c1d3c7; background: #294034; }
body[data-theme="dark"] .modal textarea { border-color: #354d41; color: #edf5f0; background: #17241d; }

@media (max-width: 520px) {
  .auth-screen { align-items: start; padding: 60px 13px 20px; }
  .auth-card { padding: 24px 20px; border-radius: 17px; }
  .auth-theme-row { top: 12px; right: 14px; }
}

@media (max-width: 720px) {
  .crm-title-row { align-items: flex-start; flex-direction: column; padding-right: 34px; }
  .crm-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .crm-list { max-height: 280px; }
  .form-pair { grid-template-columns: 1fr; }
  .member-row { grid-template-columns: 35px minmax(0,1fr) auto; }
  .member-row .role-pill { display: none; }
}

/* Collaboration tools: threads, mentions, pins, channel controls, and employee editing */
.side-badge.subtle { min-width: 19px; height: 18px; background: rgba(255,255,255,.14); font-size: 9px; }
.pin-header-button { min-width: 48px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 2px; padding: 0 8px !important; }
.pin-header-button strong { font-size: 10px; }
.channel-delete-button { width: 25px; height: 25px; flex: 0 0 25px; margin-right: 3px; display: grid; place-items: center; border: 0; border-radius: 5px; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; opacity: 0; }
.channel-row:hover .channel-delete-button, .channel-row:focus-within .channel-delete-button, .subchannel-row:hover .channel-delete-button, .subchannel-row:focus-within .channel-delete-button { opacity: 1; }
.channel-delete-button:hover { color: #fff; background: #a83e4e; }
.subchannel-row { width: 100%; display: flex; align-items: center; border-radius: 5px; }
.subchannel-row .subchannel { width: auto; flex: 1; min-width: 0; }
.pinned-label { display: inline-flex; align-items: center; margin-top: 6px; color: #946e14; font-size: 9px; font-weight: 760; }
.thread-summary { display: block; margin-top: 7px; padding: 0; border: 0; color: #1e7047; background: transparent; cursor: pointer; font-size: 11px; font-weight: 760; }
.thread-summary:hover { text-decoration: underline; }
.mention-token { display: inline; padding: 1px 3px; border-radius: 4px; color: #165d3d; background: #dcefe4; font-weight: 720; }
.message-content > p strong, .compact-message p strong, .activity-card p strong { font-weight: 820; }
.message-content > p em, .compact-message p em, .activity-card p em { font-style: italic; }

.thread-modal { width: min(680px, 100%); height: min(780px, 90vh); display: grid; grid-template-rows: auto auto minmax(120px,1fr) auto; gap: 12px; overflow: hidden; }
.thread-heading { padding-right: 42px; }
.thread-heading h2 { margin: 3px 0 4px; }
.thread-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.thread-original { padding: 10px; border: 1px solid #dbe6df; border-radius: 10px; background: #f5f9f6; }
.thread-replies { min-height: 0; overflow-y: auto; padding: 2px 4px 2px 0; }
.compact-message { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding: 8px; border-radius: 8px; }
.compact-message:hover { background: #f5f7f5; }
.compact-message > div { min-width: 0; }
.compact-message-meta { display: flex; align-items: baseline; gap: 7px; }
.compact-message-meta strong { font-size: 11px; }
.compact-message-meta time, .compact-message-meta span { color: var(--muted); font-size: 9px; }
.compact-message p { margin: 4px 0 0; color: #302d31; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-reply { padding-right: 86px; }
.thread-reply-actions { position: absolute; top: 6px; right: 7px; display: flex; gap: 3px; }
.thread-reply-actions button { border: 0; border-radius: 5px; padding: 4px 6px; color: #4f6759; background: #eaf1ec; cursor: pointer; font-size: 8px; font-weight: 760; }
.thread-reply-actions button:last-child { color: #8e3341; }
.thread-empty { margin: 18px; color: var(--muted); text-align: center; font-size: 11px; }
.thread-composer { border: 1px solid #a9b8ae; border-radius: 9px; overflow: hidden; }
.thread-composer:focus-within { border-color: #287a50; box-shadow: 0 0 0 1px #287a50; }
.thread-composer textarea { width: 100%; min-height: 58px; max-height: 130px; display: block; resize: vertical; border: 0; outline: 0; padding: 10px 11px 3px; color: var(--ink); background: transparent; font-size: 12px; }
.thread-tools { min-height: 40px; display: flex; align-items: center; padding: 3px 6px 6px; }
.thread-tools .primary-button { width: auto; margin-left: auto; }

.activity-modal { width: min(620px, 100%); max-height: min(760px, 90vh); display: flex; flex-direction: column; }
.activity-modal h2 { margin: 4px 0; }
.activity-modal > p { margin: 0 45px 14px 0; color: var(--muted); font-size: 11px; }
.activity-list { min-height: 160px; max-height: 580px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.activity-card { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 12px; border: 1px solid #dfe7e2; border-radius: 9px; color: inherit; background: #fff; cursor: pointer; text-align: left; }
.activity-card:hover { border-color: #97b3a1; background: #f5f9f6; }
.activity-card-label { color: #287a50; font-size: 9px; font-weight: 820; text-transform: uppercase; }
.activity-card p { width: 100%; margin: 0; font-size: 12px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-card time { color: var(--muted); font-size: 9px; }
.activity-empty { min-height: 160px; display: grid; place-items: center; color: var(--muted); text-align: center; font-size: 11px; }

.picker-modal { width: min(440px, 100%); }
.picker-list { max-height: 390px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.picker-list button { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px; border: 0; border-radius: 8px; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.picker-list button:hover { background: #edf5f0; }
.picker-list button > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.picker-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.picker-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 14px; }
.emoji-grid button { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #e1e8e3; border-radius: 8px; background: #f8faf8; cursor: pointer; font-size: 21px; }
.emoji-grid button:hover { border-color: #91b19d; background: #eaf4ed; transform: translateY(-1px); }

.crm-row { width: 100%; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.employee-modal-actions { display: grid; grid-template-columns: auto 1fr; gap: 9px; margin-top: 12px; }
.employee-modal-actions .primary-button { margin-top: 0; }
.danger-button { min-height: 42px; border: 1px solid #d8a9b0; border-radius: 7px; padding: 0 12px; color: #9b3041; background: #fff5f6; cursor: pointer; font-size: 11px; font-weight: 760; }
.danger-button:hover:not(:disabled) { color: #fff; background: #a83e4e; border-color: #a83e4e; }
.danger-button:disabled { opacity: .45; cursor: not-allowed; }

body[data-theme="dark"] .mention-token { color: #b8e4c8; background: #214b35; }
body[data-theme="dark"] .pinned-label { color: #e6c56c; }
body[data-theme="dark"] .thread-original,
body[data-theme="dark"] .activity-card,
body[data-theme="dark"] .emoji-grid button { border-color: #30483b; background: #14231b; }
body[data-theme="dark"] .compact-message:hover,
body[data-theme="dark"] .activity-card:hover,
body[data-theme="dark"] .picker-list button:hover { background: #1a2b22; }
body[data-theme="dark"] .compact-message p,
body[data-theme="dark"] .activity-card p,
body[data-theme="dark"] .thread-composer textarea { color: #dde9e2; }
body[data-theme="dark"] .thread-composer { border-color: #40584b; }
body[data-theme="dark"] .thread-reply-actions button { color: #c4d9cc; background: #253b2f; }
body[data-theme="dark"] .thread-reply-actions button:last-child { color: #ffc2cb; }
body[data-theme="dark"] .danger-button { border-color: #70424a; color: #ffc2cb; background: #321c21; }

@media (max-width: 560px) {
  .channel-delete-button { opacity: 1; }
  .thread-modal { height: min(820px, 94vh); padding: 22px 15px; }
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
  .employee-modal-actions { grid-template-columns: 1fr; }
  .employee-modal-actions .danger-button { order: 2; }
}