@font-face {
  font-family:HelveticaCyr;
  src:url('/assets/HelveticaNeueCyr-Roman.woff') format('woff');
  font-display:swap;
}
@font-face {
  font-family:Montserrat;
  src:url('/assets/Montserrat-Bold.woff') format('woff');
  font-weight:700;
  font-display:swap;
}
:root {
  font-family:HelveticaCyr,Arial,sans-serif;
  color:#203044;
  background:#f7f8fa;
  font-size:14px;
  --navy:#062b64;
  --coral:#f65d57;
  --line:#e6eaf0;
  --muted:#798596;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,textarea,select {
  font:inherit;
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.55;
  cursor:wait;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #f9a39f;
  outline-offset:3px;
}
button {
  border:0;
  background:none;
  color:inherit;
}
a {
  color:var(--navy);
  text-decoration:none;
}
svg {
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
h1,h2,h3,p {
  margin:0;
}
.skip-link {
  position:fixed;
  top:-60px;
  left:80px;
  background:white;
  padding:12px;
  z-index:30;
}
.skip-link:focus {
  top:12px;
}
.loading-page {
  padding:50px;
  color:var(--muted);
}
[hidden] {
  display:none!important;
}
.workspace {
  height:100dvh;
  display:grid;
  grid-template-columns:76px 308px minmax(340px,1fr);
  overflow:hidden;
}
.rail {
  background:var(--navy);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:25px 12px;
  gap:17px;
  color:#b5c5e0;
}
.rail-brand {
  width:46px;
  height:46px;
  border-radius:14px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:27px;
}
.rail-brand img {
  width:38px;
  height:32px;
  object-fit:contain;
}
.rail-link {
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:#b5c5e0;
  position:relative;
}
.rail-link.current {
  color:white;
  background:#ffffff19;
}
.rail-link.current:before {
  content:'';
  position:absolute;
  left:-15px;
  height:24px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--coral);
}
.rail-bottom {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
}
.rail-user {
  background:#f18378;
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rail-exit {
  width:38px;
  height:38px;
  color:#b5c5e0;
  display:grid;
  place-items:center;
}
.rooms {
  background:#fff;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.rooms-head {
  padding:28px 22px 19px;
}
.brand-text {
  font:700 18px Montserrat,Arial,sans-serif;
  color:var(--navy);
  letter-spacing:-.7px;
}
.brand-text span {
  color:var(--coral);
}
.rooms-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:34px;
  margin-bottom:19px;
}
.rooms-title h1 {
  font:700 25px Montserrat,Arial,sans-serif;
  letter-spacing:-1px;
}
.new-chat {
  background:var(--coral);
  color:white;
  border-radius:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
}
.search-box {
  display:flex;
  align-items:center;
  background:#f4f6f9;
  border:1px solid transparent;
  border-radius:9px;
  padding:0 11px;
  gap:9px;
  color:#8793a3;
}
.search-box:focus-within {
  border-color:#9cb0cd;
  background:#fff;
}
.search-box svg {
  width:17px;
}
.search-box input {
  width:100%;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  height:40px;
  color:#203044;
  font-size:13px;
}
.room-filters {
  display:flex;
  gap:7px;
  margin-top:16px;
}
.room-filter {
  padding:7px 11px;
  color:#8190a3;
  border-radius:6px;
  font-size:12px;
}
.room-filter.active {
  color:var(--navy);
  background:#eaf0f9;
  font-weight:700;
}
.room-list {
  overflow-y:auto;
  flex:1;
  padding:0 10px 12px;
}
.room-item {
  width:100%;
  text-align:left;
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  gap:12px;
  padding:17px 12px;
  border-radius:10px;
  position:relative;
  margin-bottom:3px;
}
.room-item:hover {
  background:#f7f9fc;
}
.room-item.selected {
  background:#edf2fa;
}
.room-item.selected:after {
  content:'';
  height:30px;
  position:absolute;
  right:-10px;
  top:25px;
  width:3px;
  background:var(--navy);
  border-radius:4px 0 0 4px;
}
.room-avatar {
  height:43px;
  width:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#e8edf7;
  color:var(--navy);
  font-family:Montserrat,sans-serif;
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
}
.room-avatar.coral {
  color:#ad554c;
  background:#fce8e4;
}
.room-avatar.green {
  color:#4a8073;
  background:#e2eeeb;
}
.room-line {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.room-line strong {
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.room-line time {
  font-size:10px;
  color:#94a0af;
  white-space:nowrap;
}
.room-preview {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:7px;
  min-width:0;
}
.room-preview p {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:#8994a3;
  line-height:1.4;
  flex:1;
}
.unread {
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  border-radius:6px;
  background:var(--coral);
  color:white;
  font-size:10px;
  padding:0 4px;
}
.rooms-foot {
  padding:15px 22px 19px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:#8794a5;
  line-height:1.7;
}
.rooms-foot strong {
  color:#65748a;
  font-weight:400;
}
.demo-role {
  width:100%;
  background:#fff;
  border:1px solid #d6deeb;
  border-radius:7px;
  padding:8px;
  margin-top:7px;
  font-size:12px;
  color:var(--navy);
}
.demo-reset {
  font-size:11px;
  text-decoration:underline;
  margin-top:7px;
  padding:2px 0;
}
.conversation-shell {
  display:flex;
  min-width:0;
  min-height:0;
}
.conversation {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#f7f8fb;
  position:relative;
}
.conversation-head {
  min-height:91px;
  border-bottom:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  padding:19px 27px;
  gap:13px;
}
.conversation-head .room-avatar {
  width:42px;
  height:42px;
  border-radius:12px;
}
.conversation-name {
  flex:1;
  min-width:0;
}
.conversation-name h2 {
  font:700 16px Montserrat,Arial,sans-serif;
  letter-spacing:-.4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.conversation-name p {
  font-size:11px;
  color:#8794a5;
  margin-top:7px;
  line-height:1.3;
}
.header-actions {
  display:flex;
  gap:6px;
}
.icon-button {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#7f8a9c;
  border-radius:8px;
}
.icon-button:hover {
  background:#edf2f8;
  color:var(--navy);
}
.icon-button svg {
  width:18px;
  height:18px;
}
.icon-button.active {
  background:#edf2f8;
  color:var(--navy);
}
.back-button {
  display:none;
}
.chat-search {
  display:flex;
  padding:10px 24px;
  background:#fff;
  border-bottom:1px solid var(--line);
  gap:9px;
}
.chat-search input {
  flex:1;
  min-width:0;
  padding:9px 11px;
  border:1px solid #dce3ed;
  border-radius:7px;
  outline:none;
}
.chat-search button {
  font-size:12px;
  color:var(--navy);
}
.pinned {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:12px 27px;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.pinned>svg {
  width:16px;
  height:16px;
  color:#b1bdcd;
  flex-shrink:0;
}
.pinned>div {
  border-left:2px solid var(--coral);
  padding-left:12px;
  flex:1;
  min-width:0;
}
.pinned b {
  color:var(--navy);
  font-size:11px;
  font-weight:700;
  display:block;
  margin-bottom:4px;
}
.pinned p {
  color:#7f8a9c;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.message-scroll {
  padding:15px 32px 24px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  scroll-behavior:auto;
  background-image:radial-gradient(#d3dce64a .7px,transparent .7px);
  background-size:17px 17px;
}
.day-divider {
  text-align:center;
  margin:12px 0 22px;
}
.day-divider span {
  font-size:10px;
  color:#8d99aa;
  background:#eaf0f7;
  padding:6px 12px;
  border-radius:20px;
}
.message {
  display:flex;
  gap:10px;
  align-items:flex-end;
  max-width:100%;
  margin:0 0 17px;
}
.message.mine {
  flex-direction:row-reverse;
}
.avatar {
  height:30px;
  width:30px;
  border-radius:10px;
  background:#dee6f3;
  color:#536f99;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
}
.avatar.partner {
  background:#f5ddd4;
  color:#aa6e50;
}
.avatar.operations {
  background:#dfece7;
  color:#497d6b;
}
.avatar.owner {
  background:#e6e0f2;
  color:#807096;
}
.bubble {
  max-width:min(500px,84%);
  border:1px solid #e8ecf3;
  background:#fff;
  border-radius:13px 13px 13px 3px;
  padding:12px 15px 8px;
  box-shadow:0 2px 4px #17335b03;
  position:relative;
  min-width:90px;
}
.message.mine .bubble {
  background:#e9f0fb;
  border-color:#e0e9f8;
  border-radius:13px 13px 3px 13px;
}
.message-author {
  font-size:11px;
  color:#5b77a4;
  font-weight:700;
  margin-bottom:7px;
}
.message-author em {
  color:#9aa6b7;
  font-style:normal;
  font-weight:400;
  font-size:10px;
  margin-left:7px;
}
.bubble .body {
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#34445a;
}
.message-meta {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:5px;
  min-height:15px;
}
.message-meta time {
  font-size:9px;
  color:#9aa9bd;
}
.message.mine .message-meta time {
  color:#8b9fbd;
}
.message-actions {
  opacity:0;
  display:flex;
  align-items:center;
  gap:9px;
  margin-right:auto;
}
.message:hover .message-actions,.message:focus-within .message-actions {
  opacity:1;
}
.message-actions button {
  padding:1px 0;
  font-size:10px;
  color:#7c90ad;
}
.message.mine .message-meta .sent {
  color:#7e9cbe;
  font-size:10px;
}
.reply-quote {
  border-left:2px solid #a3b7d6;
  border-radius:2px;
  padding:5px 9px;
  background:#f5f8fc;
  margin-bottom:8px;
  max-width:100%;
}
.reply-quote b {
  font-size:10px;
  color:#607da5;
}
.reply-quote p {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:340px;
  color:#8b98aa;
  font-size:11px;
  margin-top:4px;
}
.file-link {
  display:flex;
  align-items:center;
  gap:11px;
  margin:8px 0 2px;
  padding:9px 12px 9px 9px;
  border-radius:8px;
  background:#f1f5fb;
  min-width:190px;
  max-width:100%;
  color:var(--navy);
}
.file-link>span:first-child {
  width:32px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background:#e0e9f8;
  color:#567ba7;
  font-weight:700;
  font-size:9px;
}
.file-link b {
  display:block;
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:250px;
}
.file-link small {
  display:block;
  font-size:10px;
  color:#93a2b5;
  margin-top:5px;
}
.file-link>svg {
  margin-left:auto;
  width:14px;
  flex-shrink:0;
}
.linked-task {
  font-size:10px;
  color:#709180;
  margin-top:7px;
}
.older {
  display:block;
  margin:2px auto 20px;
  padding:8px 15px;
  border:1px solid #dfe6f0;
  background:#fff;
  border-radius:18px;
  color:#8291a6;
  font-size:11px;
}
.empty-chat {
  color:#8b97a8;
  text-align:center;
  padding:60px 20px;
  line-height:1.8;
  font-size:13px;
}
.empty-chat svg {
  width:34px;
  height:34px;
  margin:0 auto 18px;
  color:#a1b1c6;
}
.empty-chat b {
  color:#526681;
  display:block;
  margin-bottom:4px;
  font-weight:400;
  font-size:16px;
}
.composer-wrap {
  background:#fff;
  border-top:1px solid var(--line);
  padding:15px 25px 17px;
}
.composer {
  border:1px solid #dce3ed;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:9px 9px 9px 8px;
  border-radius:11px;
  background:#fff;
}
.composer:focus-within {
  border-color:#9bb2d4;
  box-shadow:0 0 0 2px #e9eff9;
}
.composer textarea {
  border:0;
  outline:none;
  resize:none;
  flex:1;
  min-width:0;
  min-height:30px;
  max-height:130px;
  background:none;
  padding:5px 3px;
  color:#34445a;
  line-height:1.5;
  font-size:13px;
}
.composer textarea::placeholder {
  color:#a0aab8;
}
.send-button {
  width:34px;
  height:34px;
  background:var(--coral);
  color:white;
  border-radius:9px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.send-button svg {
  width:18px;
  height:18px;
}
.compose-help {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#a1acba;
  margin-top:10px;
}
.compose-help .connection {
  display:flex;
  align-items:center;
  gap:5px;
}
.connection:before {
  content:'';
  height:5px;
  width:5px;
  border-radius:50%;
  background:#81a895;
}
.connection.offline:before {
  background:#e6a05c;
}
.compose-context {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  margin:0 0 10px;
  padding-left:10px;
  border-left:2px solid var(--coral);
  color:#7a8b9f;
}
.compose-context>div {
  flex:1;
  min-width:0;
}
.compose-context b {
  display:block;
  color:#526f95;
  font-size:11px;
  margin-bottom:4px;
}
.compose-context p {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.compose-context button {
  font-size:19px;
  color:#96a4b7;
}
.chat-error {
  color:#b84343;
  font-size:12px;
  margin:8px 0 0;
  line-height:1.5;
}
.context {
  width:280px;
  background:#fff;
  border-left:1px solid var(--line);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
.context-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 22px 18px;
  color:#344660;
}
.context-head h3 {
  font:700 13px Montserrat,Arial,sans-serif;
  letter-spacing:-.2px;
}
.context-section {
  padding:0 22px 23px;
  margin-bottom:0;
}
.context-section+.context-section {
  padding-top:21px;
  border-top:1px solid var(--line);
}
.context-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#9aa6b6;
  margin-bottom:15px;
}
.project-label {
  font-weight:700;
  font-size:13px;
  color:var(--navy);
  margin-bottom:7px;
  line-height:1.5;
}
.project-address {
  font-size:11px;
  line-height:1.6;
  color:#98a3b2;
}
.context-project-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#6383ad;
  margin-top:15px;
}
.context-project-link svg {
  width:12px;
  height:12px;
}
.task-row {
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f0f3f7;
}
.task-row:last-child {
  border:0;
}
.task-state {
  border:1.5px solid #cad5e4;
  width:13px;
  height:13px;
  border-radius:4px;
  flex-shrink:0;
  margin-top:2px;
  color:#85a89a;
  display:grid;
  place-items:center;
  font-size:9px;
}
.task-state.done {
  border-color:#93b4a7;
  background:#f1f7f4;
}
.task-row p {
  font-size:11px;
  line-height:1.5;
  color:#5b6b80;
}
.task-row small {
  display:block;
  color:#a0aabc;
  font-size:10px;
  margin-top:5px;
}
.member-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.member-row:last-child {
  margin-bottom:0;
}
.member-row .avatar {
  width:31px;
  height:31px;
  border-radius:10px;
}
.member-row>div:nth-child(2) {
  flex:1;
  min-width:0;
}
.member-row b {
  font-size:11px;
  font-weight:400;
  color:#53647b;
  display:block;
  margin-bottom:4px;
}
.member-row small {
  font-size:10px;
  color:#9ba6b5;
}
.member-row .member-remove {
  font-size:15px;
  color:#a7b2c0;
  padding:4px;
  opacity:0;
}
.member-row:hover .member-remove,.member-row:focus-within .member-remove {
  opacity:1;
}
.add-member {
  display:flex;
  align-items:center;
  gap:8px;
  color:#6e8db6;
  font-size:11px;
  margin:18px 0 0;
  padding:0;
}
.add-member svg {
  height:13px;
  width:13px;
}
.context-tools {
  display:flex;
  gap:20px;
  color:#9aa5b5;
  font-size:11px;
}
.context-tools b {
  color:#5e718b;
  font-size:17px;
  display:block;
  margin-bottom:5px;
  font-weight:400;
}
.knowledge-link {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--navy);
}
.knowledge-link svg {
  width:18px;
  height:18px;
  color:#7893b6;
}
.knowledge-note {
  font-size:10px;
  color:#9aa6b5;
  line-height:1.7;
  margin-top:8px;
}
.context-close {
  display:none;
}
#chat-notice {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  padding:13px 20px;
  background:#17385f;
  box-shadow:0 5px 20px #00234b22;
  color:white;
  z-index:40;
  border-radius:9px;
  font-size:12px;
  max-width:90%;
  line-height:1.5;
}
dialog {
  border:1px solid #e4e9f1;
  border-radius:17px;
  width:510px;
  max-width:calc(100% - 24px);
  padding:26px;
  color:#34465d;
  box-shadow:0 25px 100px #0b2d502b;
}
dialog::backdrop {
  background:#162e4d50;
  backdrop-filter:blur(3px);
}
.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:23px;
}
.modal-head h2 {
  font:700 18px Montserrat,Arial,sans-serif;
  letter-spacing:-.5px;
}
.modal-form label {
  display:block;
  color:#5d708a;
  font-size:12px;
  margin-bottom:15px;
}
.modal-form input:not([type=checkbox]),.modal-form select,.modal-form textarea {
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid #d9e1ed;
  border-radius:8px;
  padding:11px 12px;
  color:#20344f;
  background:white;
  outline:none;
}
.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus {
  border-color:#91a9cb;
}
.modal-form textarea {
  height:80px;
  resize:vertical;
}
.modal-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding-top:13px;
  border-top:1px solid var(--line);
  margin-top:22px;
}
.store-setup {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.button {
  border:1px solid #dce3ed;
  padding:10px 17px;
  border-radius:8px;
  font-size:12px;
  background:#fff;
}
.button.primary {
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
}
.member-choices {
  margin-top:5px;
  max-height:230px;
  overflow:auto;
}
.member-choice {
  padding:10px 0;
  border-bottom:1px solid #eff2f7;
  display:flex;
  align-items:center;
  gap:10px;
}
.member-choice>label {
  margin:0;
  display:flex;
  gap:9px;
  flex:1;
  align-items:center;
  line-height:1.4;
}
.member-choice label input {
  accent-color:var(--navy);
  width:15px;
  height:15px;
}
.member-choice select {
  width:150px;
  font-size:11px;
  padding:7px;
  margin:0;
}
.modal-form .check-label {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
}
.login-wrap {
  min-height:100dvh;
  display:grid;
  place-items:center;
  background:#f1f4f9;
  padding:20px;
}
.login-card {
  width:390px;
  background:white;
  padding:37px;
  border-radius:18px;
  box-shadow:0 18px 70px #163f7212;
}
.login-card h1 {
  font:700 23px Montserrat,Arial,sans-serif;
  color:var(--navy);
  margin:23px 0 9px;
}
.login-card>p {
  font-size:13px;
  color:#90a0b5;
  line-height:1.6;
  margin-bottom:26px;
}
.login-card button[type=submit] {
  width:100%;
  padding:12px;
}
.login-card>a {
  display:block;
  margin-top:20px;
  color:#8c9db2;
  font-size:12px;
}
.no-room {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  flex:1;
  padding:30px;
  color:#98a7b9;
  background:#f7f8fb;
}
.no-room h2 {
  font:700 21px Montserrat,sans-serif;
  color:#6d829e;
}
.no-room>svg {
  width:48px;
  height:48px;
  stroke-width:1;
}
.no-room p {
  text-align:center;
  line-height:1.7;
  max-width:300px;
  font-size:13px;
}
@media(min-width:1650px) {
  .workspace {
    grid-template-columns:84px 350px minmax(340px,1fr);
  }
  .context {
    width:305px;
  }
  .message-scroll {
    padding-left:42px;
    padding-right:42px;
  }
  .bubble {
    max-width:min(560px,83%);
  }
}
@media(max-width:1240px) {
  .context {
    display:none;
  }
  .context.shown {
    display:flex;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    z-index:9;
    box-shadow:-18px 0 55px #0a2c4c1a;
    width:300px;
  }
  .context-close {
    display:grid;
  }
  .conversation-shell {
    position:relative;
  }
  .message-scroll {
    padding:15px 25px 24px;
  }
}
@media(max-width:850px) {
  .workspace {
    grid-template-columns:62px 265px minmax(300px,1fr);
  }
  .rail {
    padding:22px 8px;
  }
  .rail-brand {
    width:41px;
    height:41px;
  }
  .rail-link {
    width:40px;
    height:40px;
  }
  .rooms-head {
    padding:25px 17px 16px;
  }
  .brand-text {
    font-size:16px;
  }
  .room-list {
    padding-left:5px;
    padding-right:5px;
  }
  .room-item {
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    padding:15px 10px;
  }
  .room-item .room-avatar {
    height:38px;
    width:38px;
    border-radius:10px;
  }
  .conversation-head {
    padding:17px 19px;
  }
  .conversation-name h2 {
    font-size:14px;
  }
  .message-scroll {
    padding:14px 16px 18px;
  }
  .bubble {
    max-width:86%;
    padding:11px 12px 7px;
  }
  .message .avatar {
    display:none;
  }
  .composer-wrap {
    padding:12px 15px 13px;
  }
  .pinned {
    padding:11px 20px;
  }
  .compose-help .connection {
    font-size:9px;
  }
  .context.shown {
    width:280px;
  }
}
@media(max-width:670px) {
  .workspace {
    grid-template-columns:1fr;
  }
  .rail {
    display:none;
  }
  .rooms {
    border:0;
    display:flex;
  }
  .rooms-head {
    padding:25px 22px 17px;
  }
  .brand-text {
    font-size:18px;
  }
  .rooms-title {
    margin-top:27px;
  }
  .room-list {
    padding:0 11px;
  }
  .room-item {
    grid-template-columns:46px minmax(0,1fr);
    padding:18px 13px;
    gap:14px;
  }
  .room-item .room-avatar {
    width:46px;
    height:46px;
    border-radius:13px;
  }
  .room-line strong {
    font-size:14px;
  }
  .room-line time {
    font-size:11px;
  }
  .room-preview p {
    font-size:13px;
  }
  .conversation-shell {
    display:none;
  }
  .workspace.has-room .rooms {
    display:none;
  }
  .workspace.has-room .conversation-shell {
    display:flex;
  }
  .back-button {
    display:grid;
  }
  .conversation-head {
    min-height:78px;
    padding:12px 12px;
    gap:9px;
  }
  .conversation-head .room-avatar {
    width:35px;
    height:35px;
    border-radius:10px;
    font-size:13px;
  }
  .conversation-name h2 {
    font-size:13px;
    max-width:calc(100vw - 170px);
  }
  .conversation-name p {
    font-size:10px;
  }
  .header-actions {
    gap:0;
  }
  .icon-button {
    width:29px;
    height:32px;
  }
  .export-button {
    display:none;
  }
  .pinned {
    padding:11px 15px;
    gap:9px;
  }
  .pinned p {
    font-size:11px;
  }
  .message-scroll {
    padding:13px 12px 18px;
  }
  .bubble {
    max-width:90%;
    padding:12px 13px 8px;
  }
  .bubble .body {
    font-size:13px;
  }
  .message-author em {
    font-size:9px;
  }
  .message-actions {
    opacity:1;
    gap:10px;
  }
  .message-actions button {
    font-size:9px;
  }
  .message {
    margin-bottom:14px;
  }
  .composer-wrap {
    padding:11px 11px 13px;
  }
  .compose-help {
    font-size:9px;
  }
  .compose-help>span:first-child {
    display:none;
  }
  .compose-help {
    justify-content:flex-end;
  }
  .context.shown {
    width:min(310px,calc(100vw - 36px));
  }
  .reply-quote p {
    max-width:230px;
  }
  .file-link b {
    max-width:190px;
  }
  .day-divider {
    margin-top:8px;
  }
  .new-chat {
    width:36px;
    height:36px;
  }
  .chat-search {
    padding:9px 12px;
  }
  .modal-head h2 {
    font-size:16px;
  }
  dialog {
    padding:22px;
  }
  .room-item.selected:after {
    right:-11px;
  }
  .no-room {
    display:none;
  }
  .rooms-foot {
    padding:13px 22px;
  }
}

/* Messenger 0.2: familiar desktop and mobile conversation layout. */
:root { --chat-paper:#dce7d8; --chat-accent:#062b64; }
.rooms-head { padding-bottom:0; }
.room-avatar,.avatar { border-radius:50%; }
.room-item { border-radius:10px; margin:3px 8px; width:calc(100% - 16px); }
.room-item.selected { background:var(--chat-accent); color:white; }
.room-item.selected .room-preview p,.room-item.selected time { color:#dce8fa; }
.room-item.selected .unread { background:white; color:var(--chat-accent); }
.room-item.selected:after { display:none; }
.conversation { background:var(--chat-paper); }
.message-scroll { background-color:var(--chat-paper); background-image:radial-gradient(#7a94751f 1px,transparent 1px); background-size:24px 24px; padding-inline:max(22px,calc((100% - 800px)/2)); }
.day-divider span { background:#66835e80; color:white; font-size:12px; }
.bubble { border:0; box-shadow:0 1px 2px #25392122; border-radius:14px 14px 14px 4px; }
.message.mine .bubble { background:#e4ffc9; border:0; border-radius:14px 14px 4px 14px; }
.bubble .body { font-size:15px; line-height:1.45; }
.message.mine > .avatar { display:none; }
.composer-wrap { position:relative; background:var(--chat-paper); border-top:0; padding:10px max(18px,calc((100% - 800px)/2)) 12px; }
.composer { border:0; border-radius:16px; box-shadow:0 1px 3px #25392116; }
.composer textarea { font-size:15px; }
.send-button { border-radius:50%; background:var(--chat-accent); }
.compose-help { color:#52684c; }
.emoji-picker { position:absolute; bottom:100%; right:20px; z-index:5; display:grid; grid-template-columns:repeat(8,36px); gap:3px; padding:12px; border-radius:16px; background:white; box-shadow:0 5px 30px #20304433; }
.emoji-picker button { font-size:24px; padding:5px; border-radius:8px; }
.emoji-picker button:hover,.emoji-picker button:focus-visible { background:#edf2f7; }
@media(max-width:700px) {
 .message-scroll { padding:12px; }
 .composer-wrap { padding:8px; }
 .bubble { max-width:88%; }
 .emoji-picker { right:8px; grid-template-columns:repeat(8,32px); }
 .message-actions { opacity:1; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

.topic-tabs{display:flex;gap:6px;overflow-x:auto;flex-shrink:0;background:white;padding:9px 14px;border-top:1px solid var(--line)}
.topic-tabs:empty{display:none}.topic-tabs button{white-space:nowrap;padding:8px 12px;border-radius:20px;background:#eef2f6}.topic-tabs button.active{background:var(--navy);color:white}

.topic-purpose{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:12px;line-height:1.5}
@media(max-width:700px){.composer-wrap{padding-bottom:max(8px,env(safe-area-inset-bottom))}.conversation-head{padding-top:max(8px,env(safe-area-inset-top))}.rooms-head{padding-top:max(16px,env(safe-area-inset-top))}}

.topic-template-group{border:1px solid var(--line);border-radius:10px;padding:12px;margin:12px 0}.topic-template-group label{display:flex;align-items:center;gap:8px;margin:8px 0}.topic-template-group input{width:auto}