:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #17233c;
  background: #f1f4fa;
  color-scheme: light;
  --surface: #fff;
  --ink: #17233c;
  --muted: #52637a;
  --line: #e2e8f2;
  --blue: #274acc;
  --blue-hover: #1c37a8;
  --blue-wash: #eef3ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; }
h1, h2, p, ul, ol { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid #5577f1; outline-offset: 3px; }
textarea { resize: vertical; }
input, select, textarea {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #c8d3e3;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
input, select { min-height: 42px; }
textarea::placeholder { color: #667690; }
.primary, .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 650;
  text-align: center;
}
.primary { background: var(--blue); color: #fff; }
.primary:hover:not(:disabled) { background: var(--blue-hover); }
.secondary { background: var(--surface); border-color: #c8d3e3; color: var(--ink); }
.secondary:hover:not(:disabled) { background: var(--blue-wash); }
.compact { font-size: .875rem; min-height: 39px; white-space: nowrap; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px max(16px, calc((100vw - 1280px) / 2));
  color: white;
  background: #142448;
}
.brand, .account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #3c60e7;
  font-weight: 800;
  font-size: 1.05rem;
}
.brand h1 { font-size: 1.125rem; letter-spacing: -.025em; line-height: 1.16; }
.account-name { color: #e1eafe; font-size: .875rem; text-align: right; overflow-wrap: anywhere; }
.account-menu { position: relative; flex: 0 0 auto; }
.account-menu > summary { display: flex; align-items: center; justify-content: center; width: 42px; min-height: 42px; padding: 0; border: 1px solid #ffffff38; border-radius: 10px; color: white; font-size: 1.6rem; line-height: 1; list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { background: #ffffff14; }
.account-menu-panel { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(230px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 28px #15295426; }
.account-menu-panel button { width: 100%; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; font-size: .875rem; }
.account-menu-panel button:hover, .account-menu-panel button[aria-pressed='true'] { background: var(--blue-wash); color: var(--blue); }
.demo-picker { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .78rem; color: #d7e1fa; }
.demo-picker select { color: white; background: #27375c; border-color: #576584; min-height: 35px; max-width: 168px; padding: 5px 6px; }
main { max-width: 1328px; margin: 0 auto; padding: 22px 24px; }
.gate { max-width: 480px; margin: 32px auto; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.gate h2, .sidebar h2, .modal-heading h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.gate p { margin-top: 10px; color: var(--muted); line-height: 1.55; }
.gate form { margin-top: 18px; display: grid; gap: 10px; }
.gate > button { margin-top: 16px; }
.workspace {
  display: grid;
  grid-template-columns: minmax(302px, 360px) minmax(0, 1fr);
  height: calc(100dvh - 108px);
  min-height: 425px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 40px #1529540d;
  overflow: hidden;
}
.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 14px 12px; }
.unread-summary { margin: -3px 18px 10px; color: var(--blue); font-size: .81rem; font-weight: 650; }
.list-filters { display: grid; gap: 8px; margin: 0 16px 10px; }
.list-filters input[type='search'] { width: 100%; min-height: 38px; font-size: .85rem; }
.unread-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.unread-filter input { width: 16px; height: 16px; min-height: 0; accent-color: var(--blue); }
.views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 12px 10px; padding: 4px; border-radius: 11px; background: #f1f4f9; }
.views button { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: 8px; padding: 7px 5px; min-height: 37px; background: transparent; color: var(--muted); font-size: .81rem; font-weight: 600; }
.view-label { min-width: 0; }
.unread-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px; color: white; background: var(--blue); font-size: .7rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.room-link.has-unread .room-link-name { font-weight: 750; }
.views button[aria-pressed='true'] { border-color: #dfe6f1; color: var(--blue); background: white; }
.views [data-view='archive'] { grid-column: 1 / -1; }
.room-list { list-style: none; padding: 4px 10px 10px; overflow: auto; }
.room-list li + li { margin-top: 3px; }
.room-list-section h3 { margin: 9px 9px 4px; color: var(--muted); font-size: .8rem; font-weight: 650; }
.room-link { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border: 1px solid transparent; border-radius: 11px; background: transparent; padding: 10px 9px; color: var(--ink); }
.room-link:hover { background: #f6f8fc; }
.room-link[aria-current='true'] { background: var(--blue-wash); border-color: #d8e3ff; }
.room-avatar { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #e9eef9; color: #304777; font-weight: 700; font-size: .81rem; }
.room-link-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.room-link-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.room-link-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .81rem; color: var(--muted); }
.status { flex: 0 0 auto; font-size: .73rem; font-weight: 700; border-radius: 50px; padding: 4px 8px; background: #edf1f8; color: #3d536f; }
.status[data-status='doing'] { background: #e8efff; color: #2345ae; }
.status[data-status='done'] { background: #e7f5ec; color: #17633a; }
.list-empty { padding: 15px 18px; font-size: .9rem; color: var(--muted); }
.detail { background: #f7f9fd; min-width: 0; min-height: 0; }
.detail-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; text-align: center; color: var(--muted); }
.detail-empty h2 { font-size: 1rem; font-weight: 650; }
.empty-mark { display: grid; place-items: center; width: 46px; height: 46px; color: var(--blue); background: #e8efff; border-radius: 14px; font-weight: 700; }
.room { display: grid; grid-template-rows: minmax(0, auto) minmax(80px, 1fr) auto auto; height: 100%; }
.room-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 20px; max-height: 58dvh; overflow-y: auto; }
.room-heading { display: flex; align-items: center; gap: 10px; }
.room-title-wrap { flex: 1; min-width: 0; }
.room-kind { color: var(--muted); font-size: .78rem; font-weight: 650; margin-bottom: 3px; }
.room-heading h2 { font-size: 1.34rem; letter-spacing: -.026em; overflow-wrap: anywhere; }
.room-heading h2:focus { outline: none; }
.room-people, .room-due { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: 7px; }
.room-people { max-height: 5em; overflow-y: auto; overflow-wrap: anywhere; }
.room-description { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9rem; overflow: auto; line-height: 1.48; font-size: .92rem; margin-top: 10px; }
.room-tools { display: grid; gap: 8px; margin-top: 12px; }
.room-tools-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-modes { display: flex; flex-wrap: wrap; min-width: 0; gap: 3px; padding: 3px; border-radius: 9px; background: #f1f4f9; }
.room-modes button { border: 0; border-radius: 7px; min-height: 32px; padding: 6px 10px; color: var(--muted); background: transparent; font-size: .8rem; }
.room-modes button[aria-pressed='true'] { color: var(--blue); background: white; }
#room-search { width: 100%; min-height: 38px; font-size: .85rem; }
.task-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.task-actions .room-due { margin-top: 0; }
.room-due.overdue { color: #982c35; font-weight: 650; }
.status-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.status-actions button { font-size: .8rem; min-height: 34px; }
.back { display: none; }
.timeline-scroll { overflow-y: auto; overscroll-behavior: contain; }
.timeline { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 16px 20px; }
.timeline:empty { padding: 0; }
.timeline-empty { color: var(--muted); padding: 26px; text-align: center; font-size: .9rem; }
.entry { width: fit-content; max-width: min(85%, 570px); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface); padding: 8px 12px; }
.entry.mine { align-self: flex-end; border-color: #dce6ff; border-radius: 14px 14px 4px 14px; background: #edf3ff; }
.entry.system { align-self: center; max-width: 100%; background: transparent; border: none; text-align: center; padding: 1px 6px; color: var(--muted); font-size: .82rem; }
.entry-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; font-size: .74rem; color: var(--muted); }
.entry.system .entry-meta { justify-content: center; margin-bottom: 2px; }
.entry-author { font-weight: 700; }
.entry-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.46; }
.entry-receipt { margin-top: 5px; color: var(--muted); font-size: .72rem; line-height: 1.35; text-align: right; }
.entry-receipt[data-state='read'] { color: var(--blue); }
.message-quote { display: grid; gap: 3px; width: 100%; min-width: 0; padding: 7px 9px; margin: 3px 0 7px; border: 0; border-left: 3px solid var(--blue); border-radius: 5px; color: var(--ink); background: #dfe9ff99; text-align: left; font-size: .8rem; }
.message-quote > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-action { border: 0; border-radius: 6px; min-height: 28px; padding: 4px 6px; color: var(--muted); background: transparent; font-size: .72rem; }
.message-action[aria-pressed='true'] { color: var(--blue); }
.message-pin-label { color: var(--blue); font-size: .7rem; }
.message-menu { position: relative; }
.message-menu > summary { display: flex; align-items: center; justify-content: center; width: 32px; min-height: 30px; border: 1px solid #c8d3e3; border-radius: 20px; color: var(--muted); background: var(--surface); cursor: pointer; list-style: none; }
.message-menu > summary::-webkit-details-marker { display: none; }
.message-menu-panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); min-width: 0; margin-top: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.message-menu[open] { flex-basis: 100%; }
.entry.mine .message-menu-panel { left: auto; right: 0; }
.message-menu-panel button { text-align: left; padding: 8px 10px; }
.message-menu-panel button:hover { background: var(--blue-wash); }
.message-deleted, .forwarded-from { margin-bottom: 6px; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.confirmation-preview { margin: 10px 0; padding: 10px; border-left: 3px solid var(--blue); background: var(--blue-wash); max-height: 140px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.mention-text { color: var(--blue); background: var(--blue-wash); border-radius: 3px; }
.reply-preview { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reply-preview .message-quote { flex: 1; margin: 0; }
.jump-highlight { animation: message-jump 2s ease-out; }
@keyframes message-jump { from { box-shadow: 0 0 0 3px #5577f1; } to { box-shadow: 0 0 0 0 transparent; } }
.mention-picker { display: grid; gap: 3px; max-height: 145px; overflow: auto; padding: 5px; border: 1px solid var(--line); border-radius: 8px; }
.mention-picker button { border: 0; border-radius: 5px; padding: 8px; color: var(--ink); background: transparent; text-align: left; }
.mention-picker button[aria-selected='true'] { color: var(--blue); background: var(--blue-wash); }
.checklist { margin-top: 12px; }
.checklist h3 { margin: 0 0 6px; font-size: .87rem; }
.checklist-items { list-style: none; padding: 0; max-height: 145px; overflow: auto; }
.checklist-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.checklist-item label { flex: 1; display: flex; gap: 7px; align-items: flex-start; min-width: 0; font-size: .82rem; font-weight: 500; }
.checklist-item input { flex: 0 0 17px; width: 17px; height: 17px; min-height: 0; accent-color: var(--blue); }
.checklist-item span { overflow-wrap: anywhere; }
.checklist-item[data-done='true'] label > span { color: var(--muted); text-decoration: line-through; }
.checklist-item button { flex: 0 0 auto; }
.checklist-form { display: flex; gap: 6px; margin-top: 6px; }
.checklist-form input { flex: 1; min-width: 0; min-height: 35px; padding: 7px 9px; font-size: .82rem; }
.checklist-form button { min-height: 35px; }
#checklist-remove-text { margin: 12px 0; overflow-wrap: anywhere; }
.message-sticker { display: block; width: 160px; height: 136px; max-width: 100%; object-fit: contain; }
.message-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.reaction-chip, .reaction-choose { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 8px; border: 1px solid #c8d3e3; border-radius: 20px; color: var(--ink); background: var(--surface); font-size: .79rem; }
.reaction-chip[aria-pressed='true'] { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }
.reaction-chip[aria-disabled='true'], .reaction-choose[aria-disabled='true'] { opacity: .6; cursor: wait; }
.reaction-choose { color: var(--muted); }
.message-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; max-height: 60dvh; overflow-y: auto; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
.attachment-queue-preview { display: grid; gap: 6px; min-width: 0; font-size: .8rem; }
.attachment-queue-list { list-style: none; padding: 0; margin: 0; max-height: 145px; overflow: auto; }
.attachment-queue-row { display: flex; gap: 7px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.attachment-queue-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.attachment-queue-copy > span { display: block; color: var(--muted); font-size: .73rem; margin-top: 3px; }
.attachment-queue-copy progress { display: block; width: 100%; height: 6px; margin-top: 4px; accent-color: var(--blue); }
.typing-status { color: #206e9e; font-size: .76rem; margin: 3px 0 0; }
.voice-panel { display: grid; gap: 7px; border: 1px solid #cfe1ed; background: #f2faff; border-radius: 12px; padding: 9px; min-width: 0; }
.voice-panel > p { margin: 0; font-size: .8rem; }
.voice-actions, .voice-access-help { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.voice-access-note { width: 100%; }
.voice-panel audio, .voice-message audio { width: 100%; min-width: 0; max-width: 100%; height: 40px; }
.voice-message { display: grid; gap: 7px; min-width: 0; width: min(290px, 100%); padding: 5px 0; }
.voice-transcript { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.voice-message .permission-help { margin: 0; }
.emoji-category-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .8rem; }
.emoji-category-field select { min-width: 0; flex: 1; padding: 6px; }
.upload-actions { display: flex; gap: 7px; }
.upload-mode-actions { display: grid; gap: 8px; margin-top: 16px; }
.composer-tools { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.composer-tools button { min-height: 30px; padding: 4px 10px; font-size: .78rem; }
.composer-tools button[aria-expanded='true'] { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }
.composer-picker { padding: 6px; border: 1px solid var(--line); border-radius: 10px; max-height: 190px; overflow: auto; }
.emoji-choices { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.emoji-choices button { min-width: 0; min-height: 36px; padding: 3px; border: 0; border-radius: 7px; background: transparent; font-size: 1.35rem; }
.emoji-choices button:hover { background: var(--blue-wash); }
.sticker-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sticker-choices button { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 6px 3px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); font-size: .72rem; }
.sticker-choices button:hover { border-color: var(--blue); }
.sticker-choices img { width: 68px; height: 58px; object-fit: contain; }
.sticker-preview { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--blue-wash); }
.sticker-preview > div { flex: 1; min-width: 0; }
.sticker-preview img { flex: 0 0 64px; object-fit: contain; }
#reaction-choices { margin-top: 12px; }
.composer-row { display: flex; align-items: end; min-width: 0; gap: 8px; }
.attach-control { position: relative; flex: 0 0 42px; padding: 0; font-size: 1.25rem; cursor: pointer; }
.attach-control:focus-within { outline: 3px solid #5577f1; outline-offset: 3px; }
.attach-control:has(:disabled) { cursor: default; opacity: .65; }
.message-form textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 150px; font-size: .93rem; resize: none; }
.attachment-preview, .attachment-download {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  background: #f0f4fd;
  border: 1px solid #d8e3f8;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: .84rem;
  text-align: left;
}
.attachment-preview { width: fit-content; max-width: 100%; }
.attachment-download { max-width: 100%; }
.attachment-download:hover:not(:disabled) { background: #e7eeff; }
.entry-text + .attachment-download { margin-top: 7px; }
.message-link { color: #095e9d; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.message-link:visited { color: #6947a3; }
.task-members-heading { font-size: .88rem; margin: 4px 0; }
.task-members-current { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; max-height: 140px; overflow: auto; font-size: .85rem; }
.task-members-current li { padding: 6px 9px; border-radius: 7px; background: #f3f7fb; overflow-wrap: anywhere; }
.task-members-choices { max-height: 210px; overflow-y: auto; }
.task-members-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.attachment-name { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.attachment-preview .attachment-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-size { flex: 0 0 auto; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.remove-attachment { border: 0; background: transparent; border-radius: 5px; color: var(--ink); font-size: 1.15rem; line-height: 1; padding: 3px 6px; }
.remove-attachment:hover { background: #e1eafd; }
dialog { max-width: min(100% - 24px, 440px); width: 440px; max-height: calc(100dvh - 24px); overflow: auto; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 20px 65px #0b194342; }
dialog::backdrop { background: #111e39a1; }
dialog form, .form-fields { display: grid; gap: 8px; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.close { min-width: 39px; padding: 5px 9px; font-size: 1.25rem; }
label { font-size: .9rem; font-weight: 650; }
#task-fields { margin-top: 3px; }
#task-fields label:not(:first-child) { margin-top: 3px; }
#group-fields { border: 1px solid #c8d3e3; border-radius: 10px; margin: 2px 0; padding: 6px 10px 10px; min-width: 0; }
#group-fields legend { font-weight: 650; font-size: .88rem; padding-inline: 4px; }
.group-choices { display: grid; gap: 4px; max-height: 170px; overflow-y: auto; }
.group-choices label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 500; overflow-wrap: anywhere; }
.group-choices input { min-height: 0; accent-color: var(--blue); width: 18px; height: 18px; flex: 0 0 auto; }
.form-error { color: #982c35; font-size: .85rem; }
.permission-help { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.invite-result { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.invite-copy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-copy-actions button { flex: 1 1 160px; }
.permission-list { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 4px; max-height: min(55dvh, 420px); overflow: auto; }
.permission-label { display: flex; align-items: center; gap: 12px; padding: 10px 4px; min-height: 48px; }
.permission-label input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 0; accent-color: var(--blue); }
.permission-label-copy { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.permission-label-copy > span { font-size: .78rem; color: var(--muted); }
.employee-row { display: flex; align-items: center; gap: 8px; }
.employee-row .permission-label { flex: 1; min-width: 0; }
.employee-row > button { flex: 0 0 auto; font-size: .75rem; padding: 7px 9px; }
.employee-actions { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; max-width: 45%; }
.employee-actions button { min-height: 34px; padding: 6px 8px; font-size: .73rem; }
.permission-section h3 { margin: 12px 4px 3px; color: var(--muted); font-size: .83rem; }
#employee-access-dialog > p, #room-link-dialog > p { margin: 12px 0; }
#room-link-url { width: 100%; }
#inviters-status, #inviters-error { margin-top: 10px; }
#submit-create { margin-top: 5px; }
.notice { position: fixed; z-index: 1; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(500px, 94vw); padding: 10px 15px; background: #1d2b47; color: white; border-radius: 10px; box-shadow: 0 5px 20px #111e3930; font-size: .88rem; pointer-events: none; }
.file-drop-overlay { position: fixed; inset: 10px; z-index: 50; display: grid; place-items: center; padding: 18px; border: 3px dashed var(--blue); border-radius: 16px; background: #edf2ffeb; pointer-events: none; text-align: center; }
.file-drop-overlay > div { max-width: 360px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 35px #172b5620; }
.file-drop-overlay strong { display: block; font-size: 1.25rem; margin-bottom: 10px; }
.file-drop-overlay p { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.selection-bar { flex: 0 0 auto; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--blue-wash); font-size: .82rem; }
.selection-bar > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.message-selection { display: flex; gap: 6px; align-items: center; font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.message-selection input { width: 18px; height: 18px; min-height: 0; accent-color: var(--blue); }
.checklist-done { text-decoration: line-through; color: var(--muted); }
.confirmation-preview { white-space: pre-wrap; max-height: 180px; overflow: auto; }
.entry-time { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.entry-edited { color: var(--muted); font-size: .7rem; }
.edit-mentions { display: flex; gap: 7px; }
.edit-mentions select { flex: 1; min-width: 0; }
.edit-mentions button { flex: 0 0 auto; }
.edit-conflict { padding: 10px; border: 1px solid #e1bb81; border-radius: 9px; background: #fffaf0; }
.edit-conflict > button { width: 100%; font-size: .82rem; }
.message-history-list { padding-left: 22px; margin-top: 12px; display: grid; gap: 16px; }
.message-history-list li { padding-left: 2px; }
.message-history-list .entry-text { margin-top: 5px; }
#message-edit-text { width: 100%; min-height: 125px; max-height: 40dvh; resize: vertical; }

@media (max-width: 700px) {
  main { padding: 0; }
  .gate { margin: 20px 12px; }
  .workspace { display: block; border: 0; border-radius: 0; box-shadow: none; height: calc(100dvh - 64px); min-height: 0; }
  .sidebar { height: 100%; border-right: 0; }
  .detail { height: 100%; display: none; }
  .workspace.has-room .sidebar { display: none; }
  .workspace.has-room .detail { display: block; }
  .room-header { padding: 10px 12px; }
  .room-heading h2 { font-size: 1.13rem; }
  .room-heading:has(#task-members-open:not([hidden])) { flex-wrap: wrap; }
  .room-heading:has(#task-members-open:not([hidden])) .room-title-wrap { flex-basis: 130px; }
  #task-members-open { margin-left: auto; }
  .room-kind { font-size: .71rem; }
  .back { display: inline-flex; min-height: 39px; padding: 4px 10px; }
  .timeline { padding: 12px; }
  .message-form { padding-inline: 10px; }
  .message-form button { padding-inline: 9px; }
  .message-form textarea { font-size: 1rem; }
  dialog input, dialog select, dialog textarea, .gate input { font-size: 1rem; }
}

@media (max-width: 365px) {
  .topbar { padding-inline: 10px; }
  .brand { gap: 6px; }
  .brand h1 { font-size: 1rem; }
  .demo-picker { gap: 4px; }
  .demo-picker select { max-width: 120px; }
  .demo-picker > span { display: none; }
}

/* Light messenger workspace; section colours also have persistent text labels. */
:root {
  --ink: #203047;
  --muted: #52657a;
  --line: #e4eaf0;
  --blue: #1468b5;
  --blue-hover: #105591;
  --blue-wash: #eaf5ff;
  background: #edf0fa;
  color: var(--ink);
}
body { background: linear-gradient(125deg, #eeeffb, #edf6f8 55%, #eef1fc); }
.topbar {
  color: var(--ink);
  background: #ffffff;
  border-bottom: 1px solid #dfe6ef;
  padding-inline: max(20px, calc((100vw - 1536px) / 2));
}
.brand { gap: 11px; }
.brand-mark { width: 37px; height: 37px; flex-basis: 37px; border-radius: 13px; background: linear-gradient(140deg, #eff4ff, #e6e3ff); }
.brand h1 { font-weight: 750; }
.account-name, .demo-picker { color: var(--muted); }
.account-menu > summary { color: #496079; border-color: #e0e7ef; background: #f6f8fb; border-radius: 13px; }
.account-menu > summary:hover, .account-menu[open] > summary { background: #eaf2fb; }
.demo-picker select { color: var(--ink); background: #f2f6fb; border-color: #d7e0eb; }
main { max-width: 1580px; padding: 16px 20px; }
.workspace { height: calc(100dvh - 96px); grid-template-columns: minmax(300px, 350px) minmax(0, 1fr); border-color: #dee5ef; border-radius: 20px; box-shadow: 0 10px 36px #344a7312; }
.sidebar { background: white; }
.sidebar-heading { padding: 19px 18px 13px; }
.sidebar h2 { font-size: 1.13rem; }
.primary { background: linear-gradient(135deg, #1468b5, #196ab1); border-radius: 12px; }
.primary:hover:not(:disabled) { background: #105591; }
.secondary { border-color: #d9e3ec; border-radius: 11px; }
input, select, textarea { border-color: #d3deea; border-radius: 12px; }
.list-filters { margin-inline: 18px; }
.list-filters input[type='search'], #room-search { background: #f4f7fa; border-color: #edf0f4; border-radius: 20px; padding-inline: 14px; }
.unread-filter { min-height: 27px; }
.views { background: transparent; padding: 0; margin: 1px 16px 12px; gap: 6px; }
.views button { --tab-ink: #155d98; --tab-fill: #e9f5ff; min-height: 37px; border-radius: 10px; color: var(--tab-ink); background: var(--tab-fill); }
.views [data-view='groups'] { --tab-ink: #69479f; --tab-fill: #f2ecff; }
.views [data-view='assigned'] { --tab-ink: #22684e; --tab-fill: #e9f7ee; }
.views [data-view='created'] { --tab-ink: #8e5716; --tab-fill: #fff3dc; }
.views [data-view='archive'] { --tab-ink: #526175; --tab-fill: #f0f3f7; }
.views button[aria-pressed='true'] { background: var(--tab-fill); color: var(--tab-ink); border-color: var(--tab-ink); box-shadow: inset 0 0 0 1px var(--tab-ink); }
.views button:hover { filter: brightness(.98); }
.room-list { padding: 2px 10px 12px; }
.room-list li + li { margin-top: 2px; }
.room-link { gap: 11px; min-height: 73px; border-radius: 13px; padding: 11px 10px; }
.room-link:hover { background: #f0f7fc; }
.room-link[aria-current='true'] { background: #08779e; border-color: #08779e; color: white; }
.room-link[aria-current='true'] .room-link-caption { color: #f0faff; }
.room-link[aria-current='true'] .unread-badge { background: white; color: #086a8c; }
.room-link-caption { font-size: .79rem; }
.room-avatar { width: 42px; height: 42px; flex-basis: 42px; border-radius: 50%; color: white; background: #2a66ad; font-size: .87rem; font-weight: 650; }
.room-avatar[data-color='0'] { background: #b03c70; }
.room-avatar[data-color='1'] { background: #277b85; }
.room-avatar[data-color='2'] { background: #6a54af; }
.room-avatar[data-color='3'] { background: #4f7b22; }
.room-avatar[data-color='4'] { background: #b35131; }
.room-avatar[data-color='5'] { background: #2a66ad; }
.room-link[data-kind='task'] .room-avatar { border-radius: 14px; }
.room-link[data-kind='group'] .room-avatar { border-radius: 16px; }
.detail {
  background-color: #d9edf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='160' fill='none' stroke='%23ffffff' stroke-opacity='.31' stroke-width='1.3'%3E%3Cg transform='rotate(-14 90 80)'%3E%3Crect x='20' y='17' width='25' height='32' rx='4'/%3E%3Cpath d='M26 26h13m-13 7h13m-13 7h8M100 22l27 10-21 19 1-16-7-13zm7 13 20-3M26 107h28a5 5 0 0 1 5 5v15a5 5 0 0 1-5 5H40l-9 8v-8h-5a5 5 0 0 1-5-5v-15a5 5 0 0 1 5-5zM126 102l4 8 9 1-7 6 2 9-8-4-8 4 2-9-7-6 9-1z'/%3E%3Ccircle cx='77' cy='75' r='10'/%3E%3Cpath d='m72 75 4 4 7-8'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, #cdebdc 0%, #bcdfea 46%, #bdcef6 100%);
}
.detail-empty { color: #324f69; }
.detail-empty h2 { padding: 9px 15px; border-radius: 20px; background: #ffffffd9; }
.empty-mark { width: 62px; height: 62px; border-radius: 20px; background: #ffffffdc; color: #267d78; box-shadow: 0 6px 20px #436f7d14; font-size: 1.5rem; }
.room-header { padding: 15px 20px; border-bottom-color: #e7edf1; }
.room-heading h2 { font-size: 1.18rem; }
.room-kind { color: #176a91; }
.room[data-kind='group'] .room-kind { color: #69479f; }
.room[data-kind='task'] .room-kind { color: #22684e; }
.room-people { margin-top: 5px; }
.room-tools { margin-top: 10px; gap: 7px; }
.room-modes { background: #f1f6fa; border-radius: 10px; }
.room-modes button[aria-pressed='true'] { color: #126694; box-shadow: 0 1px 4px #294e6b0d; }
.timeline { padding: 19px 25px; gap: 12px; }
.entry { border-color: #ffffffc9; border-radius: 14px 14px 14px 5px; background: #fff; box-shadow: 0 2px 5px #254e6710; padding: 10px 12px; }
.entry.mine { border-color: #ddedcf; border-radius: 14px 14px 5px 14px; background: #edffdb; }
.entry-author { color: #155c86; }
.entry.mine .entry-author { color: #34613f; }
.entry.system { background: #ffffffd9; border-radius: 18px; padding: 7px 12px; color: #41596f; box-shadow: none; }
.entry-receipt[data-state='read'] { color: #1764a2; }
.message-quote { background: #f0f6fa; border-left-color: #1984b3; border-radius: 5px 9px 9px 5px; }
.entry.mine .message-quote { background: #dbf0cd; border-left-color: #56884b; }
.message-form { margin: 0 16px 14px; padding: 11px 12px max(11px, env(safe-area-inset-bottom)); border: 1px solid #ffffffd9; border-radius: 17px; box-shadow: 0 4px 18px #31587812; }
.message-form textarea { background: #fafcfd; border-color: #e3eaf0; }
.composer-tools button { color: #52657a; background: #f4f7fa; border-color: transparent; border-radius: 8px; }
.attach-control { color: #196a9b; background: #edf6fc; border-color: #e0eef7; }
.attachment-download { border-color: #dce7f0; background: #f2f7fc; border-radius: 11px; }
.entry.mine .attachment-download { background: #f7fff1; border-color: #d2e3c6; }
.selection-bar { background: #f5faff; }
dialog { border-radius: 20px; border-color: #e2e9f0; padding: 23px; box-shadow: 0 24px 80px #17345038; }
dialog::backdrop { background: #20375673; }
.modal-heading { margin-bottom: 12px; }
.status[data-status='open'] { color: #80541b; background: #fff1d7; }
.checklist { border-top: 1px solid #e4ece7; padding-top: 10px; }
.checklist-item { border-bottom: 1px solid #f0f3f1; }
@media (max-width: 1000px) and (min-width: 701px) {
  main { padding: 12px; }
  .workspace { grid-template-columns: 300px minmax(0, 1fr); height: calc(100dvh - 88px); }
  .room-header { padding-inline: 14px; }
  .timeline { padding-inline: 14px; }
  .message-form { margin-inline: 10px; }
}
@media (max-width: 700px) {
  main { padding: 0; }
  .topbar { padding-inline: 12px; }
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 11px; }
  .workspace { height: calc(100dvh - 64px); border: 0; border-radius: 0; box-shadow: none; }
  .sidebar-heading { padding: 17px 16px 12px; }
  .room-header { padding: 10px 12px; }
  .room-heading h2 { font-size: 1.06rem; }
  .room-kind { font-size: .71rem; }
  .timeline { padding: 13px 12px; gap: 10px; }
  .entry { max-width: 91%; padding: 8px 10px; }
  .message-form { margin: 0 7px 7px; border-radius: 14px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .message-form textarea { font-size: 1rem; }
  dialog { padding: 18px; border-radius: 17px; }
}
@media (max-width: 365px) {
  .brand { gap: 6px; }
  .topbar { padding-inline: 9px; }
  .room-modes button { padding-inline: 7px; }
  .message-form { margin-inline: 5px; }
}

/* Compact workspace: keep chat space while secondary controls remain available. */
.topbar { min-height: 52px; padding-block: 5px; }
.brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
.brand h1 { font-size: 1rem; }
main { padding: 8px 12px; }
.workspace { height: calc(100dvh - 68px); min-height: 0; grid-template-columns: minmax(260px, 302px) minmax(0, 1fr); border-radius: 12px; }
.sidebar-heading { padding: 10px 12px 8px; }
.sidebar-heading h2 { font-size: 1rem; }
.sidebar-heading button { min-height: 34px; padding: 5px 8px; font-size: .78rem; }
.list-filters { gap: 5px; margin: 0 10px 6px; }
.list-filters input[type='search'] { min-height: 32px; padding-block: 5px; }
.views { gap: 2px; margin: 0 8px 6px; padding: 3px; }
.views button { min-height: 32px; padding: 4px; font-size: .78rem; }
.room-list { padding: 2px 6px 6px; }
.room-link { min-height: 58px; padding: 7px; gap: 8px; border-radius: 8px; }
.room-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.room-link-copy { gap: 2px; }
.room-link-name { font-size: .88rem; }
.room-link-caption { font-size: .74rem; }
.room-header { padding: 8px 12px; max-height: 52dvh; }
.room-heading { gap: 8px; }
.room-heading h2 { font-size: 1rem; line-height: 1.2; }
.room-kind { font-size: .66rem; margin-bottom: 1px; }
.room-people { margin-top: 4px; font-size: .76rem; line-height: 1.35; }
.task-actions { gap: 6px; margin-top: 5px; }
.task-actions button, .status-actions button { min-height: 30px; padding: 4px 8px; font-size: .76rem; }
.status-actions { gap: 5px; }
.status-actions:empty { display: none; }
#task-members-open { margin-left: auto; }
.room-due { font-size: .76rem; }
.task-extra { margin-top: 3px; }
.task-extra > summary { display: flex; align-items: center; gap: 8px; min-height: 30px; cursor: pointer; font-size: .77rem; color: #466079; list-style: none; }
.task-extra > summary::-webkit-details-marker { display: none; }
.task-extra > summary::before { content: '▸'; font-size: .9rem; }
.task-extra[open] > summary::before { content: '▾'; }
#task-extra-progress { margin-left: auto; color: #376a85; font-variant-numeric: tabular-nums; }
.task-extra[open] { padding-bottom: 6px; }
.task-extra .checklist { margin-top: 7px; padding-top: 7px; }
.room-description { margin-top: 6px; font-size: .85rem; line-height: 1.4; }
.room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.room-tools-actions { gap: 4px; flex: 0 0 auto; }
.room-modes { padding: 2px; gap: 2px; }
.room-modes button { min-height: 30px; padding: 4px 9px; font-size: .76rem; }
.room-icon { width: 32px; min-height: 32px; padding: 0; font-size: 1rem; }
#room-search-toggle { font-size: 1.5rem; }
#room-search { min-height: 32px; padding-block: 5px; width: auto; flex: 1 1 180px; font-size: .8rem; }
#room-results { flex-basis: 100%; margin: 0; font-size: .73rem; }
.message-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5px; margin: 0 9px 8px; padding: 6px; border-radius: 12px; }
.message-form > :not(.composer-tools):not(.composer-row) { flex-basis: 100%; min-width: 0; }
.composer-tools { order: 90; flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; }
.composer-tools button { min-width: 32px; width: 32px; min-height: 36px; padding: 2px; font-size: 1.15rem; }
.composer-row { order: 91; flex: 1 1 240px; gap: 5px; align-items: flex-end; }
.attach-control { flex-basis: 34px; min-height: 36px; }
.message-form textarea { min-height: 36px; max-height: 120px; padding: 7px 9px; font-size: 1rem; line-height: 20px; }
#send-message { min-height: 36px; padding: 6px 10px; font-size: .83rem; flex-shrink: 0; }
#composer-tools-toggle, .send-icon { display: none; }
.timeline { padding: 10px 14px; gap: 8px; }
.entry { padding: 7px 10px; }
@media (min-width: 701px) {
  #room-search-toggle { display: none; }
}
@media (max-width: 700px) {
  .topbar { min-height: 52px; padding-inline: 8px; }
  .account-menu > summary, .demo-picker select { min-height: 44px; }
  .brand h1 { font-size: .92rem; }
  .demo-picker > span { display: none; }
  main { padding: 0; }
  .workspace { display: block; height: calc(100dvh - 54px); border: 0; border-radius: 0; }
  .sidebar-heading { padding: 8px 12px; }
  .sidebar-heading button, .views button, .list-filters input[type='search'] { min-height: 44px; }
  .room-header { padding: 5px 8px; }
  .room-heading, .room-heading:has(#task-members-open:not([hidden])) { flex-wrap: nowrap; }
  .room-title-wrap { flex-basis: auto !important; }
  .room-heading h2 { font-size: .94rem; }
  .back, #group-edit { min-height: 44px; }
  .back { min-width: 44px; padding: 4px; }
  .task-actions { margin-top: 2px; gap: 4px; }
  .task-actions button, .status-actions button { min-height: 44px; }
  .task-extra > summary { min-height: 44px; }
  .room-tools { margin-top: 2px; gap: 3px; }
  .room-tools-actions { flex: 1 1 100%; }
  .room-modes { flex: 1 1 auto; display: flex; flex-wrap: nowrap; }
  .room-modes button { flex: 1 1 auto; min-width: 44px; min-height: 44px; padding: 4px 7px; }
  .room-icon { width: 44px; min-width: 44px; min-height: 44px; }
  #room-search { display: none; min-height: 44px; flex-basis: 100%; font-size: 16px; }
  .search-open #room-search { display: block; }
  .message-form { margin: 0 5px 5px; padding: 5px 5px max(5px, env(safe-area-inset-bottom)); gap: 4px; }
  .composer-tools { display: none; flex-basis: 100%; justify-content: space-around; }
  .message-form.tools-open .composer-tools { display: flex; }
  .composer-tools button { min-width: 44px; width: 44px; min-height: 44px; }
  .composer-row { flex-basis: 100%; gap: 4px; position: sticky; bottom: 0; z-index: 2; background: var(--surface); }
  #composer-tools-toggle { display: inline-flex; width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.5rem; }
  #composer-tools-toggle[aria-expanded='true'] { background: var(--blue-wash); }
  .attach-control { flex-basis: 44px; min-height: 44px; }
  .message-form textarea { min-height: 44px; padding: 10px 8px; font-size: 16px; }
  #send-message { min-width: 44px; width: 44px; min-height: 44px; padding: 0; font-size: 1.5rem; }
  .send-label { display: none; }
  .send-icon { display: inline; }
  .timeline { padding: 8px 10px; }
}