/* Tacle's shared room surfaces, with the same hierarchy at laptop and phone widths. */
:root {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#222226;
  background:#fff;
  font-size:15px;
  color-scheme:light dark;
  --paper:#fff;
  --soft:#f7f7f9;
  --sidebar:#f2f2f5;
  --line:#e1e1e6;
  --muted:#77777d;
  --selected:#dfe5f3;
  --blue:#2865d9;
  --shadow:0 2px 3px #00000010
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit;
  border:0;
  background:transparent
}
button:disabled {
  cursor:default;
  opacity:.5
}
button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:3px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:19px
}
h2 {
  font-size:17px
}
h3 {
  font-size:15px
}
p {
  line-height:1.5
}
.muted,small,time {
  color:var(--muted)
}
.brand {
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:8px;
  background:#f7b739;
  color:#fff;
  font-weight:750
}
.primary {
  border-radius:9px;
  background:var(--blue);
  color:#fff;
  padding:10px 20px;
  font-weight:600
}
.door {
  max-width:420px;
  margin:15vh auto;
  padding:24px
}
.door .brand {
  margin-bottom:28px
}
.door h1 {
  font-size:26px;
  margin-bottom:14px
}
.door p {
  color:var(--muted);
  margin-bottom:22px
}
.door input {
  display:block;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:inherit;
  padding:13px;
  width:100%;
  margin:14px 0
}
.door .primary {
  margin:8px 0 20px
}
.door-links {
  display:flex;
  gap:16px;
  align-items:center;
  font-size:13px
}
.door-links button {
  color:var(--blue);
  padding:0
}
.error {
  background:#fff0ed;
  color:#a1271f;
  padding:10px 16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:14px
}
.error button {
  font-size:20px
}
.rooms {
  max-width:680px;
  margin:60px auto;
  padding:24px
}
.rooms header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:35px
}
.rooms header button {
  margin-left:auto;
  color:var(--muted)
}
.rooms section {
  margin-top:45px
}
.rooms h2 {
  margin-bottom:14px
}
.room-choice,.invitation {
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.room-choice>span:last-child,.invitation>button {
  margin-left:auto
}
.invitation p {
  font-size:13px;
  margin-top:6px
}
.avatar {
  display:inline-grid;
  place-items:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:15px;
  font-weight:650;
  color:#272529
}
.color-0 {
  background:#ffe5b7
}
.color-1 {
  background:#f6cfd8
}
.color-2 {
  background:#bbd4ad
}
.color-3 {
  background:#cde7f5
}
.color-4 {
  background:#e7dcf7
}
.workspace {
  height:100dvh;
  display:flex;
  flex-direction:column
}
.room-header {
  height:62px;
  min-height:62px;
  display:flex;
  gap:24px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:0 20px;
  background:var(--paper)
}
.rooms-back {
  color:var(--blue);
  padding:6px 0
}
.here {
  margin-left:auto;
  display:flex;
  gap:7px;
  align-items:center
}
.here>span:first-child {
  color:var(--muted);
  font-size:13px;
  margin-right:7px
}
.here .avatar {
  border-radius:50%;
  width:30px;
  height:30px;
  font-size:13px
}
.menu {
  position:relative
}
.menu summary {
  cursor:pointer;
  list-style:none;
  color:var(--muted)
}
.menu button {
  position:absolute;
  right:0;
  top:24px;
  z-index:2;
  white-space:nowrap;
  background:var(--paper);
  box-shadow:0 3px 20px #0002;
  padding:14px 25px;
  border:1px solid var(--line);
  border-radius:8px
}
.columns {
  display:grid;
  grid-template-columns:180px minmax(290px,330px) minmax(350px,1fr) 240px;
  min-height:0;
  flex:1
}
.chats {
  padding:19px 9px;
  background:var(--sidebar);
  border-right:1px solid var(--line);
  overflow:auto
}
.chats h2 {
  text-align:center;
  margin:0 0 24px
}
.chat-choice {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 9px;
  border-radius:10px;
  text-align:left;
  margin-bottom:3px
}
.chat-choice.selected {
  background:var(--selected)
}
.chat-label {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis
}
.chat-label strong {
  font-weight:600
}
.unread {
  display:grid;
  place-items:center;
  background:#3374e6;
  color:#fff;
  min-width:17px;
  height:17px;
  border-radius:10px;
  font-size:11px;
  padding:0 4px;
  margin-left:auto
}
.panel-heading {
  height:48px;
  min-height:48px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 18px;
  gap:4px;
  background:var(--paper)
}
.panel-heading>span {
  font-size:12px;
  color:var(--muted)
}
.chat {
  display:flex;
  flex-direction:column;
  background:var(--soft);
  min-height:0;
  border-right:1px solid var(--line);
  min-width:0
}
.messages {
  display:flex;
  flex-direction:column-reverse;
  flex:1;
  overflow:auto;
  padding:12px 18px
}
.older {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 auto 15px;
  padding:4px 10px
}
.message {
  display:flex;
  gap:11px;
  margin:0 0 22px;
  line-height:1.45
}
.message>div {
  min-width:0
}
.message-by {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom:3px;
  font-size:13px
}
.message time,.sending {
  font-size:11px;
  color:var(--muted)
}
.message p {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px
}
.composer {
  padding:14px;
  position:relative
}
.composer input {
  width:100%;
  background:var(--paper);
  color:inherit;
  border:1px solid var(--line);
  border-radius:24px;
  padding:12px 48px 12px 17px;
  outline-offset:0
}
.composer button {
  position:absolute;
  right:23px;
  top:22px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  width:29px;
  height:29px;
  font-weight:650
}
.lanes {
  display:flex;
  flex-direction:column;
  background:var(--soft);
  min-width:0;
  overflow:hidden
}
.lane-list {
  display:flex;
  gap:14px;
  padding:24px 18px;
  overflow:auto;
  align-items:flex-start;
  flex:1
}
.lane {
  min-width:180px;
  flex:1;
  background:var(--sidebar);
  border-radius:14px;
  padding:12px
}
.lane>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#65656b;
  padding:2px 2px 13px
}
.lane>header span {
  font-size:13px;
  font-weight:600
}
.card {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:var(--paper);
  border-radius:11px;
  padding:16px 13px;
  margin-bottom:10px;
  box-shadow:var(--shadow)
}
.card:last-child {
  margin-bottom:0
}
.item-icon {
  font-size:20px;
  flex:none;
  color:#c99b2c
}
.item-icon.file {
  color:#ee4f49
}
.item-icon.url {
  color:#3671cd
}
.item-icon.checklist {
  color:#37a45d
}
.item-label {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:5px;
  line-height:1.35;
  overflow-wrap:anywhere
}
.item-label small {
  font-size:12px
}
.view-only {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:17px 10px
}
.files {
  overflow:auto;
  background:var(--paper)
}
.file-tree {
  list-style:none;
  margin:0;
  padding:10px 12px
}
.file-tree .file-tree {
  padding:0 0 0 14px
}
.file-tree button,.file-tree summary {
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  width:100%;
  padding:10px 2px;
  cursor:pointer
}
.file-tree small {
  display:none
}
.file-tree .item-icon {
  font-size:17px
}
.file-tree .item-label {
  font-size:14px
}
.tabs {
  display:none
}
.connection,.loading {
  background:var(--selected);
  font-size:12px;
  text-align:center;
  padding:6px
}
.loading {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 20px;
  border-radius:20px
}
.reader::backdrop {
  background:#0005
}
.reader {
  color:inherit;
  border:0;
  background:var(--paper);
  border-radius:15px;
  box-shadow:0 15px 70px #0003;
  width:min(720px,calc(100% - 48px));
  max-height:85dvh;
  overflow:auto;
  padding:26px
}
.reader header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:20px
}
.reader header button {
  font-size:26px
}
.note {
  font:inherit;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.7;
  margin:0
}
.checklist {
  padding:0;
  list-style:none
}
.checklist li {
  display:flex;
  gap:12px;
  margin:14px 0
}
@media(max-width:1050px) and (min-width:701px) {
  .columns {
    grid-template-columns:150px minmax(260px,1fr) minmax(290px,1fr)
  }
  .files {
    display:none
  }
  .tabs {
    display:flex;
    justify-content:flex-end;
    border-bottom:1px solid var(--line)
  }
  .tabs button {
    padding:10px 18px
  }
  .tab-files .files {
    display:block;
    grid-column:3
  }
  .tab-files .middle-panel {
    display:none
  }
  .lane-list {
    flex-direction:column
  }
  .lane {
    width:100%;
    flex:none
  }
}
@media(max-width:700px) {
  :root {
    font-size:16px
  }
  .room-header {
    padding:0 15px;
    gap:10px
  }
  .room-header h1 {
    font-size:18px;
    flex:1;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .rooms-back {
    font-size:15px
  }
  .here {
    gap:0;
    margin:0
  }
  .here>span:first-child {
    display:none
  }
  .here .avatar {
    border:2px solid var(--paper);
    margin-left:-5px;
    width:27px;
    height:27px;
    font-size:11px
  }
  .menu {
    display:block
  }
  .tabs {
    display:flex;
    background:var(--sidebar);
    border-radius:11px;
    padding:3px;
    margin:12px 15px 10px;
    gap:3px
  }
  .tabs button {
    flex:1;
    padding:8px 0;
    border-radius:9px
  }
  .tabs button[aria-pressed=true] {
    background:var(--paper);
    box-shadow:var(--shadow);
    font-weight:600
  }
  .columns {
    display:flex;
    flex-direction:column
  }
  .chats {
    padding:0 15px 10px;
    display:flex;
    gap:8px;
    overflow:auto;
    background:var(--paper);
    border:0;
    flex:none
  }
  .chats h2,.chats .avatar {
    display:none
  }
  .chat-choice {
    width:auto;
    white-space:nowrap;
    padding:7px 13px;
    border-radius:22px;
    margin:0;
    background:var(--sidebar);
    gap:7px;
    font-size:14px
  }
  .chat-choice.selected {
    color:var(--paper);
    background:#222226
  }
  .chat-choice strong {
    font-weight:500
  }
  .unread {
    font-size:10px;
    min-width:15px;
    height:15px
  }
  .chat {
    flex:1;
    border:0
  }
  .chat>.panel-heading {
    display:none
  }
  .messages {
    padding:14px 15px
  }
  .message-by {
    font-size:14px
  }
  .message p {
    font-size:15px;
    line-height:1.5
  }
  .composer {
    background:var(--paper);
    padding:13px 15px 20px
  }
  .composer input {
    padding:13px 48px 13px 16px
  }
  .composer button {
    right:25px;
    top:23px
  }
  .older {
    margin-bottom:12px
  }
  .lanes {
    background:var(--paper)
  }
  .files>.panel-heading {
    display:none
  }
  .lane-list {
    flex-direction:column;
    align-items:stretch;
    padding:0 15px 15px;
    gap:13px
  }
  .lane {
    flex:none;
    min-width:0
  }
  .lane>header {
    padding:1px 1px 11px
  }
  .card {
    padding:13px 12px
  }
  .card .item-icon {
    display:none
  }
  .item-label small {
    font-size:13px
  }
  .view-only {
    padding:15px 0 20px
  }
  .files {
    flex:1
  }
  .columns>.chats,.columns>.chat,.columns>.middle-panel,.columns>.files {
    display:none
  }
  .tab-chat .chats,.tab-chat .chat,.tab-board .middle-panel,.tab-lanes .middle-panel {
    display:flex
  }
  .tab-files .files {
    display:block
  }
  .file-tree {
    padding:0 18px
  }
  .file-tree .item-label {
    font-size:16px
  }
  .file-tree button,.file-tree summary {
    padding:13px 0
  }
  .reader {
    padding:20px
  }
  .rooms {
    margin:20px auto
  }
  .door {
    margin:8vh auto
  }
  .door-links {
    flex-direction:column;
    align-items:flex-start
  }
  .error {
    font-size:12px
  }
}
.message-history {
  flex:none;
  min-height:100%
}
@media(prefers-color-scheme:dark) {
  :root {
    color:#ededf0;
    background:#202023;
    --paper:#252528;
    --soft:#1e1e21;
    --sidebar:#2c2c30;
    --line:#3a3a40;
    --muted:#a1a1aa;
    --selected:#35415a;
    --blue:#5489ed;
    --shadow:0 2px 3px #0003
  }
  .lane>header {
    color:#b8b8c0
  }
  .error {
    background:#4c2929;
    color:#ffd2cb
  }
  .chat-choice.selected {
    color:#ededf0;
    background:var(--selected)
  }
}
/* Board coordinates stay in document points; only this surface transforms during gestures. */
.middle-panel {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-right:1px solid var(--line)
}
.board-tabs {
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  background:var(--sidebar);
  padding:3px;
  border-radius:24px;
  z-index:1;
  box-shadow:var(--shadow)
}
.board-tabs button {
  padding:8px 22px;
  border-radius:22px
}
.board-tabs [aria-pressed=true] {
  background:var(--paper);
  box-shadow:var(--shadow)
}
.middle-panel.show-board>.lanes,.middle-panel.show-lanes>.board {
  display:none
}
.middle-panel>.lanes {
  flex:1;
  padding-top:60px
}
.board {
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:var(--soft)
}
.board-viewport {
  position:absolute;
  inset:66px 0 54px;
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:contain;
  user-select:none;
  cursor:grab
}
.board-viewport:active {
  cursor:grabbing
}
.board-surface {
  position:absolute;
  transform-origin:0 0;
  will-change:transform;
  background-color:var(--soft);
  background-image:radial-gradient(circle,#8884 .65px,transparent .9px);
  background-size:24px 24px
}
.board-card {
  position:absolute;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow);
  cursor:inherit;
  font-size:14px;
  line-height:1.4
}
.board-card[role=button] {
  cursor:pointer
}
.board-card:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px
}
.board-label {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:3px
}
.board-label strong,.board-label small {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.board-label small {
  font-size:12px
}
.board-glyph {
  flex:none;
  font-size:28px;
  line-height:1;
  color:#29328d
}
.board-note {
  border-radius:6px
}
.board-note.expanded {
  padding:18px
}
.board-title {
  display:block;
  font-size:20px;
  margin-bottom:12px
}
.board-note-body {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.board-note.collapsed,.board-file,.board-link {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 14px
}
.board-note .board-glyph {
  color:#b38600
}
.board-checklist {
  border-radius:8px;
  padding:8px 12px
}
.board-checklist-title {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:30px
}
.board-checklist .board-glyph {
  color:#1fa864;
  font-size:22px
}
.board-tasks {
  list-style:none;
  margin:4px 0 0;
  padding:0
}
.board-tasks li {
  display:flex;
  align-items:flex-start;
  gap:6px;
  min-height:28px;
  padding:4px 0;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.task-check {
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  flex:none;
  border:1.5px solid var(--muted);
  border-radius:4px;
  margin:1px 2px 0 0;
  font-size:12px
}
.done .task-check {
  background:#1fa864;
  border-color:#1fa864;
  color:white
}
.done>span:last-child {
  text-decoration:line-through;
  color:var(--muted)
}
.board-textbox {
  border-radius:4px;
  padding:2px 3px;
  box-shadow:none;
  text-align:center;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.166667
}
.board-file,.board-link {
  border-radius:14px
}
.board-file.image {
  padding:0;
  background:transparent;
  box-shadow:none
}
.board-file img {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px
}
.picture-placeholder {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:40px;
  color:var(--muted);
  background:var(--sidebar);
  border-radius:14px
}
.board-file.video .board-glyph,.board-file.audio .board-glyph {
  color:#506cff
}
.board-link.browser {
  border-radius:24px
}
.board-link .board-glyph {
  color:#f36b4d
}
.board-folder {
  background:transparent;
  box-shadow:none;
  text-align:center;
  padding:12px 6px 0
}
.folder-art {
  position:relative;
  height:108px;
  margin-top:8px;
  background:#41acdf;
  border-radius:4px 8px 8px 8px;
  box-shadow:inset 0 5px #ffffff35,0 2px 3px #0002;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px
}
.folder-art::before {
  content:"";
  position:absolute;
  top:-8px;
  left:0;
  height:12px;
  width:56px;
  border-radius:5px 9px 0 0;
  background:#41acdf
}
.folder-preview {
  display:grid;
  place-items:center;
  width:26px;
  height:38px;
  background:#ffffffd9;
  color:#74746f;
  border-radius:2px;
  font-size:17px
}
.folder-name {
  display:block;
  margin-top:8px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.board-footer {
  position:absolute;
  bottom:12px;
  left:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  pointer-events:none
}
.board-zoom,.board-footer .view-only {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  white-space:nowrap;
  padding:6px 12px
}
.board-zoom {
  display:flex;
  align-items:center;
  gap:4px;
  pointer-events:auto;
  font-size:12px
}
.board-zoom button {
  font-size:18px;
  padding:0 3px
}
.board-zoom button[aria-label="Fit board"] {
  font-size:inherit
}
@media(max-width:700px) {
  .middle-panel {
    flex:1;
    border:0
  }
  .board-tabs {
    display:none
  }
  .middle-panel>.lanes {
    padding-top:0
  }
  .board-viewport {
    top:0
  }
  .board-footer {
    left:8px;
    right:8px
  }
  .board-footer .view-only {
    padding:8px;
    font-size:10px
  }
}
@media(prefers-color-scheme:dark) {
  .board-note .board-glyph {color:#fcc000}
  .board-checklist .board-glyph {color:#3ada8a}
  .board-file.file .board-glyph {color:#9aa3ee}
}