:root {
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #282336;
  background: #fff;
  font-synthesis: none;
  font-size: 14px;
  --grape: #493279;
  --muted: #726b80;
  --line: #ece8f0;
  --lavender: #f4f0fa;
  --coral: #f46979;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #a66ad6;
}
button {
  border: 0;
  background: transparent;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
input,
select,
textarea {
  min-width: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button:hover {
  filter: brightness(0.96);
}
.icon {
  font-size: 23px;
  border-radius: 7px;
  min-width: 32px;
  min-height: 32px;
}
.icon:hover {
  background: #eae2f5;
}
.coral {
  background: #ffd2d8;
  color: #773944;
}
.yellow {
  background: #ffe5a2;
  color: #745b24;
}
.mint {
  background: #c7eddd;
  color: #235847;
}
.purple {
  background: #e1d5f6;
  color: #573a7f;
}
.blue {
  background: #cddff5;
  color: #385c83;
}
.avatar {
  width: 37px;
  height: 37px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 750;
  flex-shrink: 0;
}
.primary {
  background: var(--grape);
  color: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  font-weight: 650;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.primary:hover {
  background: #60428d;
}
.pill {
  display: inline-block;
  padding: 7px 11px;
  background: #f0eafa;
  border-radius: 20px;
  color: var(--grape);
  font-size: 12px;
  font-weight: 650;
}
.loading,
.empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}
.sr-only {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.login {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-story {
  background: #eee6fb;
  padding: 48px 9%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100dvh;
  position: relative;
}
.wordmark {
  font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif;
  font-size: 36px;
  font-weight: 850;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -1.5px;
}
.wordmark img {
  width: 45px;
}
.wordmark span {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 10px;
  color: #78688c;
}
.login-story h1 {
  font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(38px, 4.4vw, 67px);
  letter-spacing: -2.5px;
  line-height: 1.08;
  margin: 35px 0 23px;
}
.login-story p {
  font-size: 18px;
  line-height: 1.7;
  color: #68577f;
}
.login-story small {
  color: #78688c;
  margin-top: 35px;
}
.hello-art {
  height: 180px;
  width: 300px;
  position: relative;
}
.hello-art span {
  position: absolute;
  left: 15px;
  top: 30px;
  background: var(--coral);
  border-radius: 45px 45px 45px 7px;
  padding: 23px 40px;
  color: #fff;
  font-size: 52px;
  font-weight: 800;
  transform: rotate(-10deg);
}
.hello-art b {
  position: absolute;
  right: 8px;
  top: -10px;
  font-size: 105px;
  color: #e5ad32;
  transform: rotate(10deg);
}
.hello-art i {
  position: absolute;
  right: -10px;
  bottom: -5px;
  background: #c3e8d8;
  padding: 17px 24px;
  border-radius: 25px 25px 5px 25px;
  font-style: normal;
  transform: rotate(8deg);
  font-weight: 600;
}
.login-form {
  align-self: center;
  padding: 60px max(30px, 12%);
  max-width: 690px;
}
.login-form h2 {
  font-size: 29px;
  letter-spacing: -0.9px;
  margin: 27px 0 12px;
}
.login-form > p {
  color: var(--muted);
  line-height: 1.6;
}
.login-form form {
  margin: 35px 0;
}
.login-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}
.login-form select {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid #d9cfe6;
  background: white;
  border-radius: 9px;
  margin-bottom: 15px;
}
.login-form .primary {
  width: 100%;
}
.demo-note {
  background: #f8f6fb;
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  margin: 22px 0;
}
.demo-note p {
  color: var(--muted);
  margin-top: 5px;
}
.login-form > small {
  font-size: 11px;
  color: var(--muted);
}
.shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: 58px;
  background: #493279;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 23px;
  color: #fff;
  flex-shrink: 0;
}
.top-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif;
  font-size: 27px;
  letter-spacing: -1.5px;
  font-weight: 800;
  width: 267px;
  flex-shrink: 0;
}
.top-brand > span {
  color: #ffd76c;
  font-size: 21px;
  vertical-align: top;
  margin-left: 5px;
}
.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 35px;
  background: #624d8c;
  border: 1px solid #7a689b;
  border-radius: 8px;
  padding: 0 12px;
  max-width: 600px;
  flex: 1;
  color: #e6dced;
}
.search > span:first-child {
  font-size: 24px;
}
.search input {
  background: none;
  border: 0;
  outline: 0;
  color: white;
  width: 100%;
  font-size: 13px;
}
.search input::placeholder {
  color: #dfd5eb;
}
.search-shortcut {
  font-size: 11px;
  white-space: nowrap;
}
.top-note {
  margin-left: auto;
  color: #dfd5eb;
  font-size: 11px;
  white-space: nowrap;
}
.workspace-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.rail {
  background: #f0e8f8;
  width: 75px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px 15px;
  border-right: 1px solid #e5dbef;
  gap: 28px;
}
.brand img {
  width: 43px;
  height: 43px;
}
.rail-units {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.unit {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 800;
  position: relative;
  margin-bottom: 10px;
}
.unit small {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  font-size: 10px;
  font-weight: 650;
  color: #685776;
}
.unit.selected {
  outline: 2px solid #705090;
  outline-offset: 4px;
}
.self {
  margin-top: auto;
  padding: 0;
}
.self .avatar {
  border-radius: 50%;
  border: 2px solid #fff;
}
.sidebar {
  background: #faf7fd;
  width: 244px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.workspace {
  padding: 25px 19px 24px;
  display: flex;
  justify-content: space-between;
}
.workspace h2 {
  font-size: 16px;
  letter-spacing: -0.35px;
  margin-bottom: 8px;
}
.workspace span {
  font-size: 11px;
  color: var(--muted);
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #529a7b;
  border-radius: 50%;
  margin-right: 4px;
}
.sidebar nav {
  padding: 0 12px;
  overflow-y: auto;
  min-height: 110px;
}
.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px;
  color: #65596f;
  font-size: 13px;
  min-height: 37px;
}
.nav-item > span:first-child:not(.avatar) {
  font-size: 18px;
  width: 18px;
  text-align: center;
  color: #8b799d;
}
.nav-item.active {
  background: #e7ddf5;
  color: #4b2f72;
  font-weight: 650;
}
.nav-item:hover {
  background: #eee6f7;
}
.tiny-label {
  font-size: 9px !important;
  background: #eee8f4;
  padding: 3px 5px;
  border-radius: 4px;
  margin-left: auto;
}
.nav-heading {
  font-size: 11px;
  color: #7b6b8b;
  margin: 28px 12px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.nav-heading > span {
  font-size: 10px;
}
.nav-item .avatar {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 9px;
}
.dm-heading {
  margin-top: 24px;
  margin-bottom: 2px;
}
.dm-heading .icon {
  font-size: 18px;
  min-height: 26px;
  min-width: 26px;
}
.muted {
  font-size: 12px;
  color: #8b799d;
}
.sidebar-bottom {
  margin: auto 23px 18px;
  padding-top: 25px;
  color: #766284;
}
.sidebar-bottom > b {
  font-size: 12px;
}
.sidebar-bottom p {
  font-size: 10px;
  margin-top: 6px;
}
.together-art {
  height: 75px;
  position: relative;
  width: 130px;
  margin-bottom: 10px;
}
.together-art b {
  position: absolute;
  left: 38px;
  top: 14px;
  background: #ffd76c;
  color: #6f542e;
  border-radius: 19px 19px 6px 19px;
  font-size: 35px;
  width: 52px;
  height: 50px;
  text-align: center;
  transform: rotate(-12deg);
}
.together-art span {
  position: absolute;
  top: -2px;
  left: 4px;
  font-size: 40px;
  color: #b99adb;
}
.together-art i {
  position: absolute;
  left: 94px;
  top: 29px;
  font-size: 29px;
  color: #ef97a0;
  font-style: normal;
}
.local-status {
  display: inline-block;
  margin-top: 22px;
  font-size: 10px;
  color: #857490;
}
.account {
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 15px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.account span:nth-child(2) {
  flex: 1;
}
.account b,
.account small {
  display: block;
}
.account small {
  font-size: 10px;
  color: #8c7c97;
  margin-top: 4px;
}
.account .avatar {
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.conversation {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: white;
}
.channel-header {
  padding: 23px 30px 19px;
  display: flex;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.channel-header h1 {
  font-size: 20px;
  letter-spacing: -0.45px;
}
.channel-header p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
.member-count {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 20px;
}
.member-count .avatar {
  width: 27px;
  height: 27px;
  border: 2px solid white;
  margin-left: -7px;
  border-radius: 10px;
  font-size: 8px;
}
.member-count > span:last-child {
  font-size: 11px;
  margin-left: 7px;
  color: var(--muted);
}
.channel-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  min-height: 43px;
}
.tab-selected {
  border-bottom: 2px solid #785398;
  align-self: stretch;
  display: flex;
  align-items: center;
  font-weight: 650;
  color: #60427c;
}
.channel-tabs > span:last-child {
  font-size: 10px;
  color: #7a7285;
}
.messages {
  flex: 1;
  overflow: auto;
  padding-bottom: 15px;
  scroll-behavior: auto;
}
.channel-welcome {
  padding: 31px 32px 22px;
}
.welcome-symbol {
  width: 47px;
  height: 47px;
  background: #ffe5a2;
  border-radius: 17px 17px 17px 5px;
  font-size: 32px;
  font-weight: 700;
  color: #765924;
  display: grid;
  place-items: center;
  transform: rotate(-5deg);
  margin-bottom: 17px;
}
.channel-welcome h2 {
  font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif;
  font-size: 29px;
  letter-spacing: -1px;
  margin-bottom: 9px;
}
.channel-welcome p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  max-width: 540px;
}
.welcome-tag {
  display: inline-block;
  background: #f5f0fa;
  color: #79558d;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 10px;
  margin-top: 12px;
}
.date-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 7px 25px 20px;
  font-size: 10px;
  color: #82768e;
}
.date-divider:before,
.date-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.date-divider span {
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 20px;
}
.message {
  display: flex;
  gap: 12px;
  padding: 12px 30px;
  position: relative;
}
.message:hover {
  background: #fcfaff;
}
.message-body {
  flex: 1;
  min-width: 0;
}
.message-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1px 0 6px;
}
.message-meta b {
  font-size: 13px;
}
.message-meta time {
  font-size: 10px;
  color: #92899c;
}
.you {
  font-size: 9px;
  color: #9b8ba9;
}
.message-body p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.7;
  max-width: 78ch;
}
.message-tools {
  position: absolute;
  right: 20px;
  top: -12px;
  display: flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  opacity: 0;
}
.message:hover .message-tools,
.message:focus-within .message-tools {
  opacity: 1;
}
.message-tools .icon {
  font-size: 18px;
  min-width: 30px;
  min-height: 28px;
}
.reactions {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.reactions:empty {
  display: none;
}
.reaction {
  font-size: 11px;
  border: 1px solid #e7dfee;
  border-radius: 15px;
  padding: 4px 8px;
  background: #f8f6fc;
}
.reaction.mine {
  background: #eee4fa;
  border-color: #a786c8;
}
.reply-link {
  padding: 8px 0 0;
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 10px;
  color: #725091;
}
.reply-link .avatar {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 7px;
}
.reply-link span:last-child {
  color: #96899e;
  font-size: 9px;
}
.compose-wrap {
  padding: 10px 25px 13px;
}
.composer {
  border: 1px solid #d8cde2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.composer:focus-within {
  border-color: #8f6aa7;
  box-shadow: 0 0 0 2px #eee6f5;
}
.composer textarea {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: vertical;
  min-height: 66px;
  max-height: 160px;
  outline: 0;
  padding: 15px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #282336;
}
.composer textarea::placeholder {
  color: #a091ac;
}
.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 9px 8px;
}
.composer-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9c8ca7;
}
.composer-footer > div > span {
  font-size: 10px;
}
.send {
  background: #70508f;
  color: #fff;
  padding: 8px 13px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
}
.send span {
  margin-left: 10px;
}
.compose-hint {
  font-size: 9px;
  color: #a091ac;
  text-align: right;
  margin: 8px 5px 0;
}
.thread-panel {
  width: 345px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
}
.thread-panel header {
  padding: 24px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.thread-panel h2 {
  font-size: 17px;
}
.thread-panel h2 span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 6px;
}
.thread-messages {
  flex: 1;
  overflow-y: auto;
  padding-top: 20px;
}
.thread-panel .message {
  padding: 12px 16px;
}
.thread-panel .message .avatar {
  width: 29px;
  height: 29px;
  font-size: 9px;
  border-radius: 9px;
}
.thread-label {
  font-size: 10px;
  color: #8b7a97;
  margin: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.thread-composer {
  margin: 16px;
}
.thread-composer .composer-footer > div > span {
  display: none;
}
.hub {
  flex: 1;
  overflow-y: auto;
  padding: 40px 5%;
  background: #fff;
}
.hub header {
  position: relative;
}
.hub h1 {
  font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -1.8px;
  margin: 21px 0 14px;
}
.hub header > p {
  font-size: 14px;
  color: var(--muted);
}
.hub-notice {
  padding: 16px 18px;
  background: #fff7e0;
  border-radius: 10px;
  color: #796338;
  font-size: 12px;
  line-height: 1.7;
  margin: 29px 0;
}
.hub-notice b {
  display: block;
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.integration {
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 14px;
  position: relative;
  min-width: 0;
}
.integration-icon {
  width: 42px;
  height: 42px;
  font-size: 23px;
  font-weight: 750;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 20px;
}
.integration-status {
  position: absolute;
  right: 15px;
  top: 25px;
  font-size: 9px;
  color: var(--muted);
}
.integration h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
.integration p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  min-height: 42px;
}
.integration > button {
  border-top: 1px solid var(--line);
  padding: 14px 0 0;
  margin-top: 20px;
  font-size: 11px;
  width: 100%;
  text-align: left;
  color: #70508f;
  font-weight: 600;
}
.integration > button span {
  float: right;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 17px;
  max-width: 450px;
  width: calc(100% - 36px);
  padding: 25px;
  box-shadow: 0 18px 70px #30203e30;
  color: #282336;
}
dialog::backdrop {
  background: #2b1e3c66;
}
dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}
dialog h2 {
  font-size: 20px;
}
dialog p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
dialog > .primary {
  width: 100%;
  justify-content: center;
}
.emoji-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 20px 0;
}
.emoji-picker button {
  font-size: 28px;
  border-radius: 10px;
  padding: 7px;
  background: #f8f4fc;
}
.people-list {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  gap: 7px;
}
.people-list > button,
.people-list > div {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 10px;
  gap: 12px;
  border-radius: 10px;
}
.people-list > button:hover {
  background: #f4eefb;
}
.people-list > button > span:nth-child(2) {
  flex: 1;
}
.people-list b,
.people-list small {
  display: block;
}
.people-list b {
  font-size: 12px;
}
.people-list small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
}
#toast:empty {
  display: none;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 20px;
  background: #493279;
  color: white;
  border-radius: 10px;
  max-width: 90vw;
  width: max-content;
  box-shadow: 0 6px 20px #30203e33;
  z-index: 20;
  font-size: 13px;
}
.mobile-menu,
.mobile-close {
  display: none;
}
@media (min-width: 1500px) {
  .channel-welcome {
    padding-top: 50px;
  }
  .message {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .channel-welcome h2 {
    font-size: 34px;
  }
}
@media (max-width: 1180px) {
  .top-note {
    display: none;
  }
  .thread-panel {
    width: 310px;
  }
  .sidebar {
    width: 220px;
  }
  .top-brand {
    width: 243px;
  }
  .message {
    padding-left: 23px;
    padding-right: 23px;
  }
  .integration-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 950px) {
  .thread-panel {
    position: absolute;
    right: 0;
    top: 58px;
    bottom: 0;
    width: 360px;
    box-shadow: -10px 0 30px #49327915;
    z-index: 4;
  }
  .channel-header {
    padding: 20px;
  }
  .channel-header p {
    max-width: 280px;
  }
  .member-count .avatar {
    display: none;
  }
  .sidebar-bottom {
    margin-bottom: 15px;
  }
  .sidebar {
    width: 205px;
  }
  .top-brand {
    width: 228px;
  }
  .login-story {
    padding: 35px;
  }
  .hello-art {
    transform: scale(0.8);
    transform-origin: left center;
  }
  .login-form {
    padding: 35px;
  }
  .login-story h1 {
    font-size: 44px;
  }
}
@media (max-width: 700px) {
  .topbar {
    height: 52px;
    padding: 0 15px;
    gap: 18px;
  }
  .top-brand {
    width: auto;
    font-size: 25px;
  }
  .top-brand > span {
    font-size: 16px;
  }
  .search {
    max-width: none;
  }
  .search-shortcut {
    display: none;
  }
  .rail,
  .sidebar {
    display: none;
  }
  .drawer-open .rail {
    display: flex;
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    z-index: 8;
    width: 68px;
  }
  .drawer-open .sidebar {
    display: flex;
    position: fixed;
    left: 68px;
    top: 52px;
    bottom: 0;
    width: calc(100% - 68px);
    max-width: 310px;
    z-index: 8;
    box-shadow: 20px 0 80px #32223a60;
  }
  .mobile-menu,
  .mobile-close {
    display: inline-block;
  }
  .channel-header {
    padding: 16px 13px;
    gap: 10px;
  }
  .channel-header h1 {
    font-size: 18px;
  }
  .channel-header p {
    font-size: 10px;
    max-width: 220px;
    line-height: 1.5;
  }
  .member-count {
    padding-left: 0;
  }
  .channel-tabs {
    padding: 0 20px;
    min-height: 39px;
  }
  .channel-welcome {
    padding: 25px 21px 20px;
  }
  .channel-welcome h2 {
    font-size: 27px;
  }
  .channel-welcome p {
    font-size: 12px;
  }
  .welcome-symbol {
    width: 42px;
    height: 42px;
    font-size: 28px;
  }
  .message {
    padding: 13px 18px;
    gap: 10px;
  }
  .message > .avatar {
    width: 32px;
    height: 32px;
    font-size: 10px;
    border-radius: 10px;
  }
  .message-body p {
    font-size: 13px;
  }
  .message-tools {
    position: static;
    opacity: 1;
    border: 0;
    align-self: flex-start;
    flex-direction: column;
    gap: 3px;
    background: transparent;
  }
  .message-tools .icon {
    font-size: 17px;
    min-width: 25px;
    min-height: 25px;
  }
  .message-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
  .message-meta b {
    font-size: 12px;
  }
  .you {
    display: none;
  }
  .compose-wrap {
    padding: 8px 12px 10px;
  }
  .composer-footer > div > span {
    display: none;
  }
  .composer textarea {
    min-height: 60px;
  }
  .compose-hint {
    font-size: 8px;
  }
  .date-divider {
    margin-left: 18px;
    margin-right: 18px;
    font-size: 9px;
    gap: 5px;
  }
  .thread-panel {
    top: 52px;
    width: 100%;
    z-index: 9;
  }
  .hub {
    padding: 22px;
  }
  .hub .mobile-menu {
    position: absolute;
    right: 0;
    top: 0;
  }
  .hub h1 {
    font-size: 35px;
  }
  .integration-grid {
    grid-template-columns: 1fr;
  }
  .integration {
    padding: 20px;
  }
  .integration p {
    min-height: 0;
  }
  .hub-notice {
    margin: 23px 0;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .login-story {
    min-height: auto;
    padding: 28px;
  }
  .login-story > div:nth-child(2) {
    display: none;
  }
  .login-story > small {
    display: none;
  }
  .login-form {
    padding: 35px 28px;
  }
  .login-form h2 {
    font-size: 26px;
  }
  .wordmark span {
    margin-left: auto;
  }
  .sidebar-bottom {
    padding-top: 20px;
  }
  .together-art {
    height: 65px;
  }
  .emoji-picker {
    gap: 3px;
  }
  .emoji-picker button {
    font-size: 25px;
    padding: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.search:focus-within {
  outline: 2px solid #d6bee9;
  outline-offset: 2px;
}

.notification-button {
  margin-left: auto;
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  background: #fff;
  color: #4c3475;
  cursor: pointer;
  flex-shrink: 0;
}
#notice-count {
  font-weight: 800;
}
.emoji-picker {
  flex-wrap: wrap;
  max-width: 360px;
}

#create-room {
  display: grid;
  gap: 14px;
}
#create-room label {
  display: grid;
  gap: 6px;
}
#create-room input:not([type="checkbox"]),
#create-room select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d9cbe8;
  border-radius: 8px;
  font: inherit;
}
#create-room .member-option {
  display: flex;
  align-items: center;
  padding: 6px;
}
#create-room fieldset {
  border: 1px solid #d9cbe8;
  border-radius: 8px;
  max-height: 200px;
  overflow: auto;
}
.rail-units {
  overflow-y: auto;
  min-height: 0;
}
.nav-heading .icon {
  margin-left: auto;
}
@media (max-width: 600px) {
  .search {
    min-width: 0;
  }
  .notification-button {
    padding: 7px;
    margin-left: 4px;
  }
}

.rail-units {
  padding: 6px 5px 18px;
  max-width: 64px;
}
.rail-units .unit {
  flex-shrink: 0;
}
.unit small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-heading {
  gap: 8px;
}
.notice-read {
  border: 1px solid #d9cbe8;
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  color: #4c3475;
  margin-top: 12px;
}

#invite-workspace-members {
  display: grid;
  gap: 16px;
}
#invite-workspace-members fieldset {
  border: 1px solid #d9cbe8;
  border-radius: 10px;
  padding: 12px;
  max-height: 320px;
  overflow: auto;
}
#invite-workspace-members .member-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
  cursor: pointer;
}
#invite-workspace-members input {
  flex-shrink: 0;
  margin-top: 4px;
}
#invite-workspace-members .member-option span {
  display: grid;
  gap: 4px;
}
#invite-workspace-members small {
  display: block;
  color: var(--muted, #756b86);
  font-size: 12px;
  line-height: 1.5;
}

#channel-settings-form {
  display: grid;
  gap: 12px;
}
#channel-settings-form select {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #d9cbe8;
  border-radius: 8px;
  font: inherit;
}
#channel-settings-form fieldset {
  border: 1px solid #d9cbe8;
  border-radius: 10px;
  max-height: 230px;
  overflow: auto;
  padding: 10px;
}
#channel-settings-form .member-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
}
#channel-settings-form .member-option span {
  display: grid;
  gap: 3px;
}
#channel-settings-form small {
  display: block;
  color: #756b86;
  font-size: 12px;
}

.attachment {
  display: block;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.attachment img {
  display: block;
  max-width: min(100%, 360px);
  max-height: 280px;
  border-radius: 12px;
  object-fit: contain;
}
.file-button {
  cursor: pointer;
  display: inline-flex;
  padding: 8px;
}
.file-button input {
  width: 24px;
  max-width: 24px;
}
#edit-message,
#search-all {
  display: grid;
  gap: 14px;
}
#edit-message textarea {
  width: 100%;
  min-height: 120px;
}
#search-all input,
#search-all select {
  display: block;
  width: 100%;
}
.search-result {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #e9e2f1;
  white-space: normal;
  overflow-wrap: anywhere;
}
#search-results {
  max-height: 45vh;
  overflow: auto;
}

#emoji-results {
  max-height: 360px;
  overflow: auto;
  margin-top: 12px;
}
#emoji-search,
#emoji-group {
  width: 100%;
}
.message-tools {
  flex-wrap: wrap;
}

#update-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 1000;
  background: #493279;
  color: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 24px #0003;
}
#update-banner[hidden] {
  display: none;
}

.file-button {
  position: relative;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}
.file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
#search-all input,
#search-all select,
#emoji-search,
#emoji-group,
#notification-settings select,
#edit-message textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid #d7c9e8;
  border-radius: 9px;
  background: white;
  color: #2c263b;
}
#notification-settings {
  display: grid;
  gap: 16px;
}

.privacy-page {
  max-width: 760px;
  margin: 40px auto;
  padding: 24px;
  line-height: 1.7;
}
.privacy-page h2 {
  margin-top: 28px;
}

.message-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height:1.6; }
.message-text code { background:#f1eafa; padding:2px 5px; border-radius:4px; }
.message-text a { color:#65438a; text-decoration:underline; }
.mention { background:#ede2ff; color:#4c2877; border-radius:4px; padding:1px 3px; }
.nav-item.unread { font-weight:800; color:#412063; }
.unread-count { margin-left:auto; background:#65438a; color:white; border-radius:12px; padding:1px 7px; font-size:12px; }
.new-divider { color:#a54566; border-top:1px solid #d88ba6; text-align:center; margin:12px 0; }
.jump-latest { align-self:center; border:1px solid #ddd0ed; border-radius:18px; padding:5px 14px; color:#65438a; background:white; }
.mention-choices { display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:#f7f2fc; }
.mention-choices button { border:1px solid #d8c5eb; padding:5px 9px; border-radius:6px; background:white; }

/* Chat Block identity: keep the symbol legible in compact headers. */
.top-brand img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.text-list { margin: 0; padding-left: 1.25em; }
.jump-latest[hidden] { display: none; }

.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.workspace-icon { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.icon-grid button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; border: 2px solid transparent; border-radius: 14px; background: transparent; font-size: 12px; }
.icon-grid img { width: 64px; max-width: 100%; }
.icon-grid button[aria-pressed="true"], .icon-grid button:focus-visible { border-color: #67449B; background: #f2ecfa; }
.mention-choices button.selected { background: #e8ddf5; color: #493279; }
.message-body audio { display: block; width: min(100%, 320px); margin: 8px 0; }
.voice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#voice-preview { max-width: 100%; }
.composer-footer > div { display: flex; align-items: center; flex-wrap: wrap; }

.workspace-menu-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:8px 0; font:inherit; font-size:18px; font-weight:750; text-align:left; color:inherit; background:transparent; border:0; cursor:pointer; }
.workspace-menu-trigger > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-menu-trigger:hover { color:#67449B; }
.workspace-actions { display:grid; gap:4px; }
.workspace-actions .nav-item { width:100%; margin:0; padding:13px 12px; }
.workspace-actions hr { width:100%; border:0; border-top:1px solid #e8e0ef; }
.menu-count { margin-left:auto; font-size:12px; border-radius:9px; padding:2px 7px; background:#e8ddf5; }
.channel-tabs { min-height:36px; padding-top:0; padding-bottom:0; justify-content:flex-end; }
#sync-status { color:#399878; font-size:12px; }
.compact-login { display:flex; min-height:100dvh; align-items:center; justify-content:center; background:#faf7ff; padding:24px; }
.compact-login .login-form { width:min(100%,440px); padding:32px; background:white; border:1px solid #e8e0ef; border-radius:20px; }
.compact-login .wordmark { color:#493279; margin-bottom:32px; }
.compact-login .wordmark img { width:40px; height:40px; }
@media(max-width:600px) { .compact-login {padding:16px;} .compact-login .login-form {padding:24px;} }
.workspace { padding: 18px 19px 10px; }
.workspace-menu-trigger > span { font: inherit; color: inherit; }
.workspace-menu-trigger > span:last-child { font-size: 16px; }

/* Keep history loading separate from the message column and channel edges. */
.messages [data-action="older-messages"] {
  display: block;
  width: fit-content;
  max-width: calc(100% - 32px);
  min-height: 44px;
  margin: 16px auto 20px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}
#notification-settings label {
  display: grid;
  gap: 8px;
  min-width: 0;
}
#notification-settings select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}
#notification-settings .primary { margin-top: 4px; }

/* Shared dialog and narrow-screen layout rules from the visual audit. */
dialog {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
dialog header h2 { min-width: 0; margin: 0; }
dialog header > button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
dialog form > label { display: grid; gap: 8px; min-width: 0; }
dialog input:not([type="checkbox"]):not([type="radio"]),
dialog select, dialog textarea { min-width: 0; max-width: 100%; }
dialog fieldset { min-width: 0; }
.people-list > :is(button, div) > span { min-width: 0; overflow-wrap: anywhere; }
.people-list .avatar { flex-shrink: 0; }
.channel-header > div:first-of-type { min-width: 0; }
.channel-header h1 { overflow-wrap: anywhere; }
.message-meta { flex-wrap: wrap; }
.message-meta b { overflow-wrap: anywhere; min-width: 0; }
.reactions { flex-wrap: wrap; }
.icon-grid button:hover { background: #f2ecfa; }
:where(button, input, select, textarea, a):focus-visible { outline: 2px solid #67449b; outline-offset: 3px; }
@media (max-width: 700px) {
  dialog { padding: 20px; width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .message { flex-wrap: wrap; }
  .message-body { flex-basis: calc(100% - 44px); }
  .message-tools { flex-direction: row; margin-left: 42px; gap: 2px; padding: 0; }
  .message-tools .icon { min-width: 44px; min-height: 44px; }
  .composer-footer { flex-wrap: wrap; gap: 8px; }
  .composer-footer .icon, .composer-footer .file-button { min-width: 44px; min-height: 44px; }
  .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Shared illustration atlas: one download, original approved artwork. */
.mascot { display:block; width:100%; height:100%; border-radius:inherit; background-image:url("/icons/mascots-v1.png"); background-repeat:no-repeat; background-size:539.231% 431.538%; }
.icon-grid .mascot { width:64px; height:64px; max-width:100%; aspect-ratio:1; border-radius:14px; }
.mascot.m1 { background-position: 1.5762% 2.0882%; }
.mascot.m2 { background-position: 25.7443% 2.0882%; }
.mascot.m3 { background-position: 50.0000% 2.0882%; }
.mascot.m4 { background-position: 74.3433% 2.0882%; }
.mascot.m5 { background-position: 98.6865% 2.0882%; }
.mascot.m6 { background-position: 1.5762% 33.6427%; }
.mascot.m7 { background-position: 25.7443% 33.6427%; }
.mascot.m8 { background-position: 50.0000% 33.6427%; }
.mascot.m9 { background-position: 74.3433% 33.6427%; }
.mascot.m10 { background-position: 98.6865% 33.6427%; }
.mascot.m11 { background-position: 1.5762% 65.1972%; }
.mascot.m12 { background-position: 25.7443% 65.1972%; }
.mascot.m13 { background-position: 50.0000% 65.1972%; }
.mascot.m14 { background-position: 74.3433% 65.1972%; }
.mascot.m15 { background-position: 98.6865% 65.1972%; }
.mascot.m16 { background-position: 1.5762% 96.2877%; }
.mascot.m17 { background-position: 25.7443% 96.2877%; }
.mascot.m18 { background-position: 50.0000% 96.2877%; }
.mascot.m19 { background-position: 74.3433% 96.2877%; }
.mascot.m20 { background-position: 98.6865% 96.2877%; }
dialog > label { display:grid; gap:8px; margin-bottom:12px; }
#emoji-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:4px; padding:8px 0; }
#emoji-results button { min-width:44px; min-height:44px; padding:4px; }
dialog h3 { margin:24px 0 12px; }
dialog .demo-note button { min-height:44px; padding:8px; }

/* Companion collection: twelve new original characters in a 4 × 3 atlas. */
.mascot.m21, .mascot.m22, .mascot.m23, .mascot.m24, .mascot.m25, .mascot.m26, .mascot.m27, .mascot.m28, .mascot.m29, .mascot.m30, .mascot.m31, .mascot.m32 { background-image:url("/icons/mascots-female-v1.png"); background-size:400% 300%; }
.mascot.m21 { background-position: 0.00000% 0.00000%; }
.mascot.m22 { background-position: 33.33333% 0.00000%; }
.mascot.m23 { background-position: 66.66667% 0.00000%; }
.mascot.m24 { background-position: 100.00000% 0.00000%; }
.mascot.m25 { background-position: 0.00000% 50.00000%; }
.mascot.m26 { background-position: 33.33333% 50.00000%; }
.mascot.m27 { background-position: 66.66667% 50.00000%; }
.mascot.m28 { background-position: 100.00000% 50.00000%; }
.mascot.m29 { background-position: 0.00000% 100.00000%; }
.mascot.m30 { background-position: 33.33333% 100.00000%; }
.mascot.m31 { background-position: 66.66667% 100.00000%; }
.mascot.m32 { background-position: 100.00000% 100.00000%; }

/* Workspace identities, rendered from a single original illustration atlas. */
.workspace-art { background-image:url("/icons/workspaces-v2.png"); background-size:400% 400%; }
.workspace-icon { display:block; overflow:hidden; }
.workspace-icon > img { width:100%; height:100%; object-fit:cover; }
.workspace-art.s1 { background-position:0.00000% 0.00000%; }
.workspace-art.s2 { background-position:33.33333% 0.00000%; }
.workspace-art.s3 { background-position:66.66667% 0.00000%; }
.workspace-art.s4 { background-position:100.00000% 0.00000%; }
.workspace-art.s5 { background-position:0.00000% 33.33333%; }
.workspace-art.s6 { background-position:33.33333% 33.33333%; }
.workspace-art.s7 { background-position:66.66667% 33.33333%; }
.workspace-art.s8 { background-position:100.00000% 33.33333%; }
.workspace-art.s9 { background-position:0.00000% 66.66667%; }
.workspace-art.s10 { background-position:33.33333% 66.66667%; }
.workspace-art.s11 { background-position:66.66667% 66.66667%; }
.workspace-art.s12 { background-position:100.00000% 66.66667%; }
.workspace-art.s13 { background-position:0.00000% 100.00000%; }
.workspace-art.s14 { background-position:33.33333% 100.00000%; }
.workspace-art.s15 { background-position:66.66667% 100.00000%; }
.workspace-art.s16 { background-position:100.00000% 100.00000%; }

.mascot.frenchie { background-image:url("/icons/frenchie-isabella-v1.png"); background-size:cover; background-position:center; }

/* Chat-first layout: quiet controls, readable messages, compact mobile composer. */
.ui-icon { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
.channel-header { position:relative; min-height:68px; padding:12px 24px; gap:12px; }
.channel-header > div:first-of-type { flex:1; }
.channel-header h1 { font-size:19px; line-height:1.4; }
.channel-header .member-count { flex-shrink:0; }
.conversation-actions { position:relative; flex-shrink:0; }
.conversation-actions summary, .message-actions summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; color:#786986; }
summary::-webkit-details-marker { display:none; }
.conversation-actions summary:hover, .message-actions summary:hover { background:#f1eafa; color:#493279; }
.conversation-action-list { position:absolute; right:0; top:48px; z-index:12; width:220px; background:white; padding:6px; border:1px solid #e3daec; border-radius:12px; box-shadow:0 8px 24px #30203e20; }
.conversation-action-list button, .message-action-list button { display:block; width:100%; min-height:44px; text-align:left; padding:10px 12px; border-radius:7px; font-size:13px; }
.conversation-action-list button:hover, .message-action-list button:hover { background:#f4eff9; }
#sync-status { padding:0; font-size:12px; line-height:1.5; background:#fff8e8; }
#sync-status:not(:empty) { padding:4px 18px; }
#sync-status[title="Terhubung"] { font-size:0; padding:0; height:0; }
.message { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; padding:12px 24px; }
.message > .avatar { width:36px; height:36px; }
.message-meta { padding-right:40px; min-height:22px; margin-bottom:3px; }
.message-meta b { font-size:14px; }
.message-text { font-size:14px; line-height:1.55; }
.message-body > small { display:block; color:#85788f; font-size:11px; margin-top:5px; }
.message-actions { grid-column:2; min-width:0; }
.message-actions > summary { position:absolute; right:12px; top:6px; }
.message-action-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin-top:8px; border:1px solid #e8e0ef; border-radius:10px; padding:4px; background:white; }
.danger-action { color:#aa3650; }
.message-actions:not([open]) { height:0; }
.reactions:empty { display:none; }
.thread-panel header { padding:12px 16px; min-height:68px; }
.thread-panel header .icon { min-width:44px; min-height:44px; }
.compose-wrap { padding:10px 20px 16px; }
.composer { border-radius:14px; }
.composer:focus-within { border-color:#9475b8; box-shadow:0 0 0 2px #9475b815; }
.composer textarea { font-size:15px; line-height:1.5; min-height:60px; padding:12px 14px 4px; }
.composer-footer { display:flex; justify-content:space-between; flex-wrap:nowrap; gap:4px; padding:4px 8px 8px; }
.composer-footer > div { flex-wrap:nowrap; gap:0; }
.composer-footer .icon, .composer-footer .file-button { width:40px; min-width:40px; height:44px; min-height:44px; padding:10px; color:#786986; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }
.composer-footer .icon:hover, .file-button:hover { background:#f3edf9; }
.send { display:flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:40px; padding:8px 12px; border-radius:10px; }
.send span { margin:0; }
.send-status { font-size:12px; color:#756784; line-height:1.5; padding:0 14px 8px; }
.send-status:empty { display:none; }
.notification-button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; }
.topbar > .icon { color:white; min-width:44px; min-height:44px; }
summary:focus-visible { outline:2px solid #67449b; outline-offset:2px; }
@media (max-width:700px) {
  .topbar { padding:0 12px; gap:8px; }
  .topbar .search { display:none; }
  .top-brand { margin-right:auto; }
  .topbar > .icon { margin:0; }
  .channel-header { min-height:60px; padding:8px 12px; gap:6px; }
  .channel-header h1 { font-size:17px; }
  .channel-header .mobile-menu { min-width:44px; min-height:44px; }
  .member-count { min-width:32px; min-height:44px; }
  .message { grid-template-columns:32px minmax(0,1fr); padding:10px 14px; gap:0 10px; }
  .message > .avatar { width:32px; height:32px; }
  .message-meta b { font-size:13px; }
  .message-text { font-size:14px; }
  .message-actions > summary { right:4px; top:4px; }
  .compose-wrap { padding:8px 8px max(8px,env(safe-area-inset-bottom)); }
  .composer-footer { padding:2px 4px 6px; }
  .composer-footer .icon, .composer-footer .file-button { min-width:40px; width:40px; }
  .send { padding:8px; }
  .send .send-label { display:none; }
  .thread-composer { margin:8px; }
  .thread-panel header { min-height:60px; }
  .thread-panel .message { padding:10px 14px; }
  .sidebar .workspace { padding:14px 16px; }
}
.message.compact { padding-top:5px; padding-bottom:5px; }
.message.compact > .avatar { visibility:hidden; }
.message.compact .message-meta { position:absolute; left:16px; top:9px; width:36px; min-height:0; padding:0; margin:0; }
.message.compact .message-meta b, .message.compact .message-meta .you { display:none; }
.message.compact .message-meta time { font-size:10px; }
.message.compact .message-text { padding-right:32px; }
.message.compact .message-actions summary { top:0; }
.date-divider { margin:18px 24px 12px; font-size:11px; color:#82758e; }
@media(max-width:700px) { .message.compact .message-meta { left:7px; } .date-divider {margin:16px 14px 10px;} }
.composer-footer .icon, .composer-footer .file-button { width:44px; min-width:44px; }

/* Personal tools stay in dialogs instead of crowding the conversation. */
.personal-list {display:grid;gap:16px;min-width:0}
.personal-list section {border-bottom:1px solid var(--line,#e9e2f1);padding-bottom:16px;min-width:0}
.personal-list .search-result {width:100%;text-align:left;overflow-wrap:anywhere}
.personal-list section > button:not(.search-result) {margin-top:8px;min-height:44px}
#typing-status {min-height:22px;font-size:12px;color:#736784;padding:0 12px 4px}
#dialog form label {display:flex;flex-direction:column;gap:8px}
#dialog form label.member-option {flex-direction:row;align-items:center}
#dialog input[type=datetime-local] {width:100%;min-width:0;box-sizing:border-box}
#dialog [data-action=check-update],#dialog [data-action=logout] {display:block;width:100%;margin-top:12px;min-height:44px}
/* Update notice occupies space; it must never cover Send or recording controls. */
body {height:100dvh;display:flex;flex-direction:column}
#app {flex:1;min-height:0}
.shell {height:100%}
#update-banner {position:static;order:-1;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 16px;border-radius:0;font-size:13px;box-shadow:none}
#update-banner button {min-height:44px;background:white;color:#493279;border:0;border-radius:8px;padding:8px 12px}
#update-banner[hidden] {display:none}
#dialog input[type=datetime-local] {min-height:44px;border:1px solid #d8c8ea;border-radius:8px;padding:10px;background:white;color:#292335;font:inherit}

/* Personal chat is a separate destination above workspaces. */
.personal-home {position:relative;background:#493279;color:white;flex-shrink:0;margin-top:12px}
.personal-home svg {width:28px;height:28px}
.personal-home small {color:#615174}
.personal-home.selected {outline-color:#76559b}
.rail-divider {height:1px;background:#d8c9e6;width:36px;flex-shrink:0;margin:10px auto 4px}
.personal-unread {position:absolute;right:-5px;top:-5px;background:#d93665;color:white;border:2px solid #f1e9f8;border-radius:20px;padding:2px 5px;min-width:19px;font-size:11px;line-height:16px}
.personal-heading {font-weight:750;font-size:20px;color:#292335}
.workspace .personal-heading {font-size:18px;font-weight:750;color:#292335;padding:8px 0;line-height:1.4}
.shell {position:relative}
@media (max-width:700px) {
  .drawer-open .rail,.drawer-open .sidebar {position:absolute;top:52px}
}