@import url("vo.css");

.vo-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, var(--vo-accent-soft), transparent 42%),
    var(--vo-bg);
  color: var(--vo-ink);
  font-family: var(--vo-font, Inter, sans-serif);
}

@media (max-width: 960px) {
  .vo-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(240px, 42%);
  }
}

.vo-cal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0;
}

.vo-cal-chip {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
}

.vo-map-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--vo-floor);
}

.vo-office {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.vo-office-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  min-height: 52px;
  min-width: 0;
  padding: 0.4rem 0.9rem;
  background: var(--vo-bg-elev);
  border-bottom: 1px solid var(--vo-line);
  flex-shrink: 0;
}

.vo-office-bar__left,
.vo-office-bar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.vo-bar-ico { display: none; }

@media (max-width: 1600px) {
  .vo-bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vo-bar-ico { display: inline; font-size: 0.95rem; line-height: 1; }
  .vo-office-bar .vo-btn { padding: 0.4rem 0.55rem; }
  .vo-reception input { max-width: 6.5rem; }
}

.vo-office-bar a.vo-btn:hover {
  text-decoration: none;
}

.vo-office-bar__right {
  justify-content: flex-end;
}

.vo-office-bar__company {
  font-weight: 650;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.vo-reception {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--vo-line);
  background: var(--vo-panel);
  border-radius: 999px;
  padding: 0.15rem 0.55rem 0.15rem 0.25rem;
  font-size: 0.8rem;
}

.vo-reception select,
.vo-reception input {
  border: 0;
  background: transparent;
  color: var(--vo-ink);
  font: inherit;
  max-width: 9.5rem;
}

.vo-userchip {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--vo-accent);
  color: var(--vo-accent-ink);
  font-size: 0.7rem;
  font-weight: 700;
}

.vo-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--vo-line);
  background: var(--vo-panel);
  color: var(--vo-ink);
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.vo-icon-btn:hover { background: var(--vo-hover); }

.vo-map-toolbar {
  display: none;
}

.vo-guest-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.vo-guest-url {
  flex: 1 1 16rem;
  min-width: 0;
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: var(--vo-input);
  color: var(--vo-ink);
}

.vo-person--guest .vo-avatar {
  box-shadow: 0 0 0 2px var(--vo-info);
}

.vo-floor-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.1rem 0.5rem;
}

.vo-floor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0.85rem;
  min-height: 100%;
  min-width: 0;
}

.vo-floor-privates {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  align-content: start;
}

.vo-floor-meetings {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-content: start;
}

@media (max-width: 1500px) {
  .vo-floor {
    grid-template-columns: minmax(0, 1fr);
  }

  .vo-floor-privates,
  .vo-floor-meetings,
  .vo-room--lead {
    grid-column: 1;
    grid-row: auto;
  }
}

.vo-room {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
  border: 1px solid var(--vo-line);
  background: var(--vo-floor-card);
  color: var(--vo-ink);
  border-radius: 16px;
  box-shadow: var(--vo-shadow-sm);
  padding: 0.7rem 0.8rem 0.8rem;
  cursor: pointer;
  min-height: 108px;
}

.vo-room--lead {
  grid-column: 1;
  min-height: 150px;
}

.vo-room--empty {
  background: var(--vo-floor-card-empty);
}

.vo-room--empty .vo-room__label {
  color: var(--vo-muted);
}

.vo-room--own {
  border: 2px solid var(--vo-own);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vo-own) 22%, transparent);
}

.vo-room--selected:not(.vo-room--own) {
  border-color: var(--vo-focus);
}

.vo-room--meeting {
  min-height: 168px;
}

.vo-room__label {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1.4rem;
}

.vo-room__icon {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  color: var(--vo-muted);
}

.vo-room__lock {
  position: absolute;
  top: 0.42rem;
  left: 0.55rem;
  z-index: 2;
  font-size: 0.9rem;
  line-height: 1;
}

.vo-room--locked .vo-room__label {
  padding-left: 1.15rem;
}

.vo-room__people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  align-items: flex-start;
}

.vo-room-menu {
  position: absolute;
  z-index: 8;
  right: 0.4rem;
  top: 1.6rem;
  background: var(--vo-panel, #fff);
  border: 1px solid var(--vo-line, #ccc);
  border-radius: 8px;
  padding: 0.25rem;
}

.vo-room__menu {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  font-size: 1rem;
}

.vo-voice {
  width: min(280px, 100%);
  display: block;
}

.vo-speech {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--vo-panel, #fff);
  border: 1px solid var(--vo-line, #ccc);
  border-radius: 8px;
  font-size: 11px;
  padding: 1px 6px;
  z-index: 6;
}

.vo-person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 52px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.vo-inbound {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 7;
  width: max-content;
  max-width: 220px;
  padding: 0.4rem 0.55rem;
  background: var(--vo-panel);
  color: var(--vo-ink);
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  box-shadow: var(--vo-shadow);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  animation: vo-pop-in 180ms ease;
}

.vo-inbound strong {
  display: block;
  font-size: 0.72rem;
}

.vo-inbound::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--vo-panel);
  border-bottom: 0;
}

.vo-person__name,
.vo-person__caption {
  font-size: 0.65rem;
  line-height: 1.2;
  max-width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.vo-person__caption { color: var(--vo-muted); }

.vo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--vo-floor-card);
}

.vo-hand-queue {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.vo-react-burst {
  position: absolute;
  right: 1.5rem;
  bottom: 5.5rem;
  display: flex;
  gap: 0.35rem;
  font-size: 1.8rem;
  pointer-events: none;
}

.vo-cast-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 24rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
  color: var(--vo-ink);
  text-decoration: none;
}

.vo-person--talking .vo-avatar {
  box-shadow: 0 0 0 3px #12b76a;
  animation: vo-talk 1.1s ease-in-out infinite;
}

@keyframes vo-talk {
  0%, 100% { box-shadow: 0 0 0 2px #12b76a; }
  50% { box-shadow: 0 0 0 6px rgba(18, 183, 106, 0.35); }
}

.vo-avatar--available { background: #0f6e56; }
.vo-avatar--busy { background: #b54708; }
.vo-avatar--away { background: #667085; }
.vo-avatar--incall { background: #6941c6; }
.vo-avatar--dnd { background: #b42318; }

.vo-floor-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem 0.35rem;
  overflow-x: auto;
  flex-shrink: 0;
}

.vo-floor-tab,
.vo-floor-slot {
  flex: 0 0 auto;
  min-width: 88px;
  height: 28px;
  border-radius: 8px;
  border: 1px dashed var(--vo-line);
  background: color-mix(in srgb, var(--vo-panel) 70%, transparent);
  color: var(--vo-muted);
  font-size: 0.78rem;
}

.vo-floor-tab.active {
  border-style: solid;
  background: var(--vo-panel);
  color: var(--vo-ink);
  font-weight: 600;
}

.vo-floor-slot { min-width: 36px; font-weight: 700; }

.vo-dock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.7rem;
  background: var(--vo-bg-elev);
  border-top: 1px solid var(--vo-line);
  flex-shrink: 0;
}

.vo-dock__center,
.vo-dock__right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.vo-dock__center {
  justify-content: center;
}

.vo-dock__right {
  justify-content: flex-end;
}

.vo-dock-btn {
  min-width: 42px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--vo-line);
  background: var(--vo-panel);
  color: var(--vo-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.55rem;
  cursor: pointer;
}

.vo-dock-btn.danger {
  background: var(--vo-danger);
  color: #fff;
  border-color: transparent;
}

.vo-dock-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

a.vo-dock-btn {
  text-decoration: none;
  color: var(--vo-ink);
}

@media (max-width: 960px) {
  .vo-floor,
  .vo-floor-meetings {
    grid-template-columns: 1fr;
    grid-column: auto;
    grid-row: auto;
  }

  .vo-office-bar {
    grid-template-columns: 1fr;
  }
}

.vo-talk-ring {
  fill: none;
  stroke: #12b76a;
  stroke-width: 3;
  pointer-events: none;
  transform-origin: center;
  transform-box: fill-box;
  animation: vo-talk 0.9s ease-in-out infinite;
}

.vo-incall-badge {
  fill: #6941c6;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
}

.vo-inzoom-badge {
  fill: #2d8cff;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
}

.vo-zoom-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 1rem;
}

.vo-zoom-url {
  flex: 1;
  min-width: 12rem;
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  background: var(--vo-input);
  color: var(--vo-ink);
}

.vo-pill-zoom {
  background: color-mix(in srgb, var(--vo-info) 18%, transparent);
  color: var(--vo-info);
}

.vo-avatar-caption {
  font-size: 11px;
  font-weight: 650;
  fill: var(--vo-ink);
  pointer-events: none;
}

@keyframes vo-talk {
  0%, 100% { stroke-opacity: 1; stroke-width: 3; }
  50% { stroke-opacity: 0.35; stroke-width: 5; }
}

.vo-status-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.vo-status-picker select,
.vo-status-picker input {
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  background: var(--vo-input);
  color: var(--vo-ink);
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.vo-status-picker input {
  width: 11rem;
}

.vo-pill {
  border-radius: 999px;
  background: #f4ebff;
  color: #6941c6;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
}

.vo-avatar-label {
  font-size: 10px;
  fill: #fff;
  font-weight: 700;
  pointer-events: none;
}

.vo-chat-pane {
  background: var(--vo-panel);
  border-left: 1px solid var(--vo-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.vo-shell.chat-closed {
  grid-template-columns: minmax(0, 1fr);
}

.vo-shell.chat-closed .vo-chat-column { display: none; }

.vo-chat-column {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.vo-chat-collapse {
  position: absolute;
  z-index: 4;
  top: 0.45rem;
  left: 0.35rem;
}

.vo-chat-tabs { padding-left: 1.7rem; }

.vo-chat-reopen { right: 0.8rem; top: 4.2rem; }

.vo-chat-tabs {
  display: flex;
  border-bottom: 1px solid var(--vo-line);
}

.vo-chat-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.85rem 0.5rem;
  font-weight: 600;
  color: var(--vo-muted);
}

.vo-chat-tabs button.active {
  color: var(--vo-link);
  box-shadow: inset 0 -2px 0 var(--vo-link);
}

.vo-chat-list {
  flex: 0 1 auto;
  max-height: 28%;
  min-height: 0;
  overflow: auto;
  border-bottom: 1px solid var(--vo-line);
}

.vo-chat-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--vo-line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vo-chat-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vo-chat-preview {
  color: var(--vo-muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vo-unread {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--vo-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.vo-chat-tabs .vo-unread {
  margin-left: 0.35rem;
}

.vo-earlier {
  align-self: center;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}

.vo-chat-item.active,
.vo-chat-item:hover {
  background: var(--vo-hover);
}

.vo-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  /* flex-end here makes overflow past the top unscrollable; .vo-chat-stack's
     margin-top: auto keeps short chats pinned to the bottom instead. */
  justify-content: flex-start;
  background: var(--vo-bg);
}

.vo-chat-stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: min-content;
  /* Without this the stack shrinks to the pane and overflows upward, out of scroll reach. */
  flex-shrink: 0;
}

.vo-msg {
  position: relative;
  max-width: 92%;
  background: var(--vo-msg);
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  padding: 0.3rem 0.45rem 0.35rem;
}

.vo-msg.bookmarked {
  border-color: var(--vo-focus);
}

.vo-quote, .vo-typing, .vo-upload-error, .vo-seen { display: block; font-size: 0.85rem; }
.vo-ain-drag { cursor: grab; opacity: .6; margin-right: .35rem; }
.vo-ain-row.muted { opacity: .55; }
.vo-ain-count.dim { opacity: .45; }
.vo-ain-menu { display: flex; flex-direction: column; background: var(--vo-panel, #fff); border: 1px solid var(--vo-line, #ddd); position: absolute; z-index: 5; }
.vo-switcher { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; display: flex; justify-content: center; padding-top: 12vh; }
.vo-switcher-panel { background: var(--vo-panel, #fff); width: min(32rem, 92vw); padding: 1rem; border-radius: 12px; }
.vo-switcher-panel button { display: flex; width: 100%; justify-content: space-between; background: transparent; border: 0; padding: .4rem; }
.vo-switcher-panel button.active { background: var(--vo-accent-soft); color: var(--vo-link); }
.vo-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 40; }
.vo-msg-deleted {
  color: var(--vo-muted);
  font-style: italic;
}

.vo-msg-more {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 4;
}

.vo-msg-kebab {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--vo-bg-elev) 88%, transparent);
  color: var(--vo-ink);
  cursor: pointer;
  font: inherit;
}

.vo-msg-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 3;
  flex-direction: column;
  min-width: 13.5rem;
  padding: 0.25rem;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  box-shadow: var(--vo-shadow-sm);
}

.vo-msg-more:hover .vo-msg-menu,
.vo-msg-more.open .vo-msg-menu {
  display: flex;
}

.vo-msg-menu button {
  border: 0;
  background: transparent;
  color: var(--vo-ink);
  text-align: left;
  font: inherit;
  font-size: var(--vo-fs-sm);
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}

.vo-msg-menu button:hover,
.vo-msg-menu button.on {
  background: var(--vo-accent-soft);
  color: var(--vo-link);
}

.vo-msg-menu button.danger {
  color: var(--vo-danger);
}

.vo-msg-edit,
.vo-msg-forward {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.vo-msg .meta {
  font-size: 0.75rem;
  color: var(--vo-muted);
  margin-bottom: 0.15rem;
}

.vo-mention {
  background: var(--vo-accent-soft);
  color: var(--vo-ink);
  border-radius: 4px;
  padding: 0 0.15rem;
}

.vo-msg-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.vo-thread-bar,
.vo-channel-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--vo-line);
  background: var(--vo-panel);
}

.vo-thread-root {
  margin: 0.5rem 0.75rem 0;
}

.vo-search-hits {
  border-top: 1px solid var(--vo-line);
}

.vo-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.vo-search-bar .vo-input {
  width: auto;
  flex: 1 1 14rem;
}

.vo-search-bar label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.vo-chat-compose {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  border-top: 1px solid var(--vo-line);
  flex-shrink: 0;
  min-width: 0;
  background: var(--vo-panel);
}

.vo-compose-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.vo-chat-compose input,
.vo-chat-compose textarea,
.vo-ain-compose textarea.vo-compose-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-height: calc(1.35em * 6 + 1rem);
  resize: none;
  overflow: hidden;
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  padding: 0.4rem 0.55rem;
  background: var(--vo-input);
  color: var(--vo-ink);
  font: inherit;
  line-height: 1.35;
}

.vo-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: var(--vo-hover);
  color: var(--vo-ink);
  cursor: pointer;
  flex: 0 0 auto;
}

.vo-icon-btn.primary {
  background: var(--vo-accent);
  color: #fff;
}

.vo-icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.vo-glyph {
  display: block;
}

.vo-upload-error {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  color: var(--vo-danger, #b42318);
}

.vo-upload-error button {
  min-height: 32px;
  border: 1px solid var(--vo-line);
  background: var(--vo-panel);
  color: var(--vo-ink);
  border-radius: 8px;
  padding: 0 0.55rem;
  cursor: pointer;
}

.vo-attach {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}

.vo-attach input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.vo-attach-name {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0 0.75rem 0.75rem;
  font-size: 0.85rem;
  color: var(--vo-muted);
}

.vo-msg-preview {
  max-width: 100%;
  max-height: 240px;
  border-radius: 8px;
  display: block;
  margin-top: 0.4rem;
}

.vo-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
  align-items: center;
}

.vo-react,
.vo-react-add {
  border: 1px solid var(--vo-line);
  background: var(--vo-hover);
  color: var(--vo-ink);
  border-radius: 999px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 0.45rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.vo-react.mine {
  background: var(--vo-accent-soft);
  border-color: var(--vo-focus);
}

.vo-react-wrap {
  position: relative;
}

.vo-emoji-picker {
  position: fixed;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(8, 1.7rem);
  gap: 0.15rem;
  padding: 0.4rem;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  box-shadow: var(--vo-shadow);
}

.vo-emoji {
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1.4;
  cursor: pointer;
  border-radius: 6px;
}

.vo-emoji:hover {
  background: var(--vo-hover);
}

.vo-btn {
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  background: var(--vo-accent);
  color: #fff;
}

.vo-btn.secondary {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-btn.danger {
  background: var(--vo-danger);
}

.vo-zoom-advanced {
  margin: 0.35rem 1rem 0;
  color: var(--vo-muted);
  font-size: var(--vo-fs-sm);
}

.vo-zoom-advanced summary {
  cursor: pointer;
}

.vo-call-overlay {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 4.75rem;
  top: 4.25rem;
  width: auto;
  max-width: none;
  background: var(--vo-panel);
  color: var(--vo-ink);
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-lg);
  box-shadow: var(--vo-shadow);
  padding: 0.85rem 1rem 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vo-call-head,
.vo-call-views {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.vo-call-room {
  margin-left: 0.5rem;
  color: var(--vo-muted);
  font-size: var(--vo-fs-sm);
}

.vo-call-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
  margin-top: 0.65rem;
  overflow: hidden;
}

.vo-call-side {
  border-left: 1px solid var(--vo-line);
  padding-left: 0.75rem;
  overflow: auto;
}

.vo-call-side h3 {
  margin: 0 0 0.4rem;
  font-size: var(--vo-fs-sm);
}

.vo-call-roster {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.vo-call-roster li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--vo-line);
}

.vo-call-roster li[data-speaking="true"] {
  color: var(--vo-ok);
}

.vo-call-device {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--vo-fs-xs);
  color: var(--vo-muted);
  min-width: 8rem;
}

.vo-call-body > div:first-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.vo-call-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0;
  min-height: 0;
}

.vo-call-overlay[data-view="speaker"] .vo-speaker-main {
  flex: 1;
  min-height: 0;
}

.vo-call-overlay[data-view="speaker"] .vo-speaker-main .vo-tile,
.vo-call-overlay[data-view="speaker"] .vo-speaker-main .vo-tile video,
.vo-call-overlay[data-view="speaker"] .vo-speaker-main .vo-tile-fallback {
  min-height: 0;
  height: 100%;
}

.vo-filmstrip {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.vo-screen-share video {
  width: 100%;
  max-height: 200px;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

.vo-participant-tiles {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0.55rem;
}

.vo-tile {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid var(--vo-line);
}

.vo-tile[data-speaking="true"] {
  outline: 2px solid var(--vo-ok);
}

.vo-tile video,
.vo-tile-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
}

.vo-tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.65rem 0.45rem;
  color: #fff;
  font-size: 0.8rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}

.vo-remote-audio {
  display: none;
}

.vo-call-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  margin-top: 0.55rem;
  position: relative;
  z-index: 2;
}

.vo-call-cluster {
  grid-column: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.vo-call-split { position: relative; display: flex; align-items: center; }

.vo-call-btn,
.vo-call-chevron {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vo-hover);
  color: var(--vo-ink);
  cursor: pointer;
  padding: 0;
}

.vo-call-btn svg,
.vo-call-chevron svg { width: 20px; height: 20px; }

.vo-call-chevron { width: 22px; min-width: 22px; height: 40px; border-radius: 0 999px 999px 0; margin-left: -8px; background: transparent; }
.vo-call-split > .vo-call-btn { border-radius: 999px 0 0 999px; }

.vo-call-btn.is-off { background: var(--vo-danger); color: #fff; }
.vo-call-btn.is-on { background: var(--vo-accent); color: var(--vo-accent-ink, #fff); }

.vo-call-leave {
  grid-column: 3;
  justify-self: end;
  height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 0.9rem;
  background: var(--vo-danger, #b42318);
  color: #fff;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.vo-call-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 5;
  min-width: 12rem;
  max-width: 16rem;
  padding: 0.3rem;
  background: var(--vo-panel);
  color: var(--vo-ink);
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  box-shadow: var(--vo-shadow);
}

.vo-call-menu button {
  display: flex;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}

.vo-call-menu button.checked::before { content: "✓ "; }
.vo-call-reacts { display: grid; grid-template-columns: repeat(4, 2rem); min-width: 0; }
.vo-call-reacts button { width: 2rem; justify-content: center; padding: 0.25rem; }
.vo-call-more-wrap { display: none; }

@media (max-width: 860px) {
  .vo-call-optional { display: none; }
  .vo-call-more-wrap { display: flex; }
}

.vo-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 50;
  width: min(360px, calc(100vw - 2rem));
}

.vo-toast {
  background: var(--vo-panel);
  color: var(--vo-ink);
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  box-shadow: var(--vo-shadow);
  padding: 0.85rem 1rem;
}

.vo-toast h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.vo-toast p {
  margin: 0 0 0.75rem;
  color: var(--vo-muted);
  font-size: 0.9rem;
}

.vo-toast-actions {
  display: flex;
  gap: 0.5rem;
}

.vo-toast-meta {
  margin: -0.35rem 0 0.75rem;
  color: var(--vo-muted);
  font-size: 0.8rem;
}

.vo-empty {
  color: var(--vo-muted);
  padding: 1rem;
  font-size: 0.92rem;
}

.vo-cal-page {
  max-width: none;
}

.vo-cal-zone {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--vo-fs-sm);
  color: var(--vo-muted);
}

.vo-cal-zone .vo-input {
  width: auto;
  min-width: 10rem;
}

.vo-cal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vo-cal-toolbar,
.vo-cal-views,
.vo-cal-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.vo-cal-range {
  font-weight: 600;
  margin: 0 0.5rem;
}

.vo-cal-hint {
  color: var(--vo-warn);
  font-size: var(--vo-fs-sm);
}

.vo-cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.vo-cal-dow {
  font-size: var(--vo-fs-xs);
  color: var(--vo-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem;
}

.vo-cal-mday {
  position: relative;
  min-height: 7.5rem;
  text-align: left;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-sm);
  color: var(--vo-ink);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
}

.vo-cal-mday.muted { opacity: 0.45; }
.vo-cal-mday.today,
.vo-cal-dayhead.today {
  outline: 1px solid var(--vo-focus);
}

.vo-cal-more {
  border: 0;
  background: transparent;
  color: var(--vo-link);
  font-size: 0.7rem;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.vo-cal-popover {
  position: absolute;
  z-index: 5;
  left: 0.3rem;
  right: 0.3rem;
  top: 1.6rem;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  box-shadow: var(--vo-shadow);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.vo-cal-popover button {
  border: 0;
  background: transparent;
  color: var(--vo-ink);
  text-align: left;
  font-size: 0.75rem;
}

.vo-cal-pill {
  font: inherit;
  font-size: 0.7rem;
  text-align: left;
  color: var(--vo-ink);
  background: var(--vo-accent-soft);
  border: 0;
  border-radius: 6px;
  padding: 0.15rem 0.3rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.vo-cal-mday:hover {
  background: color-mix(in srgb, var(--vo-link) 8%, var(--vo-panel));
}

.vo-cal-board {
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius);
  background: var(--vo-panel);
  overflow: hidden;
}

.vo-cal-board-head,
.vo-cal-board-body {
  display: grid;
}

.vo-cal-board-head {
  border-bottom: 1px solid var(--vo-line);
  background: var(--vo-panel);
}

.vo-cal-board-scroll {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

.vo-cal-gutter {
  color: var(--vo-muted);
  font-size: var(--vo-fs-xs);
}

.vo-cal-gutter div {
  padding: 0 0.35rem;
  box-sizing: border-box;
}

.vo-cal-col {
  position: relative;
  border-left: 1px solid var(--vo-line);
  min-width: 0;
  cursor: pointer;
}

.vo-cal-slot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}

.vo-cal-slot:hover {
  background: color-mix(in srgb, var(--vo-link) 12%, transparent);
}

.vo-cal-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  border-top: 1px solid var(--vo-line);
  pointer-events: none;
}

.vo-cal-now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: #e5484d;
  z-index: 3;
  pointer-events: none;
}

.vo-cal-now::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
}

.vo-cal-draft {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 1;
  background: var(--vo-accent-soft);
  border: 1px dashed var(--vo-focus);
  border-radius: 6px;
  pointer-events: none;
}

.vo-cal-grid {
  display: grid;
  grid-template-columns: 4rem repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.vo-cal-grid[data-calendar-week="False"] {
  grid-template-columns: 4rem minmax(0, 1fr);
}

.vo-cal-hours {
  display: grid;
  grid-template-rows: 2.4rem repeat(14, 3.2rem);
  color: var(--vo-muted);
  font-size: var(--vo-fs-xs);
}

.vo-cal-daycol {
  display: grid;
  grid-template-rows: 2.4rem repeat(14, 3.2rem);
  min-width: 0;
}

.vo-cal-dayhead {
  font-weight: 600;
  font-size: var(--vo-fs-sm);
}

.vo-cal-slot {
  border-top: 1px solid var(--vo-line);
  min-height: 3.2rem;
  padding: 0.15rem;
}

.vo-cal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  overflow: hidden;
  background: var(--vo-accent-soft);
  border-left: 3px solid var(--vo-focus);
  border-radius: 6px;
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  cursor: grab;
}

.vo-cal-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  cursor: ns-resize;
}

.vo-cal-event span {
  display: block;
  color: var(--vo-muted);
}

.vo-cal-agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vo-cal-agenda-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.vo-cal-drawer {
  margin-top: 1.25rem;
  max-width: 640px;
}

.vo-cal-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vo-cal-rsvp-line {
  font-size: var(--vo-fs-xs);
  color: var(--vo-muted);
}

@media (max-width: 800px) {
  .vo-cal-grid { grid-template-columns: 3rem minmax(0, 1fr); }
  .vo-cal-2 { grid-template-columns: 1fr; }
  .vo-call-body { grid-template-columns: 1fr; }
  .vo-call-side { border-left: 0; padding-left: 0; }
}

.vo-cast-page {
  max-width: 960px;
  padding: 1.25rem 1.5rem 2.5rem;
}

.vo-cast-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.vo-cast-head h1 {
  margin: 0 0 0.25rem;
}

.vo-cast-stage-wrap {
  position: relative;
  background: #0b1220;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--vo-line);
}

.vo-cast-stage-wrap canvas,
.vo-cast-player video,
.vo-cast-preview {
  width: 100%;
  display: block;
  max-height: 420px;
  background: #0b1220;
  object-fit: contain;
}

.vo-cast-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
}

.vo-cast-controls,
.vo-cast-player-bar,
.vo-cast-react {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

.vo-cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.vo-cast-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}

.vo-cast-card img,
.vo-cast-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: #111827;
}

.vo-cast-thumb {
  display: grid;
  place-items: center;
  color: var(--vo-muted);
  font-size: 0.8rem;
}

.vo-cast-meta {
  color: var(--vo-muted);
  font-size: var(--vo-fs-xs);
}

.vo-cast-stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--vo-muted);
  font-size: var(--vo-fs-sm);
}

.vo-cast-comments {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vo-cast-comment {
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
}

.vo-cast-react button.mine {
  outline: 2px solid var(--vo-focus);
}

.vo-ain-app {
  height: 100vh;
  overflow: hidden;
  background: var(--vo-bg);
  color: var(--vo-ink);
}

.vo-ain {
  display: grid;
  grid-template-columns: 76px 272px minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
}

.vo-ain-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.35rem;
  background: var(--vo-bg-elev);
  border-right: 1px solid var(--vo-line);
}

.vo-ain-rail a.vo-ain-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--vo-accent), var(--vo-accent-hi));
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.vo-ain-rail button {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  height: auto;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--vo-muted);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.2rem 0.15rem;
  overflow: hidden;
}

.vo-ain-rail-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-ain-rail-count {
  font-size: 0.62rem;
  line-height: 1;
  color: var(--vo-accent-ink, #fff);
  background: var(--vo-accent);
  border-radius: 999px;
  padding: 0.05rem 0.3rem;
}

.vo-ain-rail button.active,
.vo-ain-rail button:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-ain-rail .vo-ain-rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.vo-ain-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--vo-panel);
  border-right: 1px solid var(--vo-line);
}

.vo-ain-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.5rem;
}

.vo-ain-side-head h1 {
  font-size: 1.15rem;
  margin: 0;
}

.vo-ain-side-actions {
  display: flex;
  gap: 0.25rem;
}

.vo-ain-iconbtn {
  border: 0;
  background: transparent;
  color: var(--vo-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
}

.vo-ain-iconbtn:hover { background: var(--vo-hover); color: var(--vo-ink); }
.vo-ain-iconbtn { position: relative; z-index: 7; pointer-events: auto; }

.vo-ain-pins {
  display: flex;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem 0.75rem;
  overflow-x: auto;
}

.vo-ain-pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #7c5cbf;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
}

.vo-ain-pin.hash { background: #5b8def; border-radius: 10px; }

.vo-ain-nav {
  display: flex;
  flex-direction: column;
  padding: 0 0.4rem 0.5rem;
}

.vo-ain-ico {
  width: 1.15rem;
  text-align: center;
  color: var(--vo-muted);
  flex-shrink: 0;
}

.vo-ain-bots {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.vo-ain-bots .vo-ain-av {
  margin-left: -0.4rem;
  border: 2px solid var(--vo-panel);
}

.vo-ain-bots .vo-ain-av:first-child { margin-left: 0; }

.vo-ain-more {
  margin-left: 0.2rem;
  color: var(--vo-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.vo-ain-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.vo-ain-av.sm {
  width: 22px;
  height: 22px;
  font-size: 0.58rem;
}

.vo-ain-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-ain-chev {
  width: 0.8rem;
  color: var(--vo-muted);
}

.vo-ain-nav button,
.vo-ain-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.42rem 0.65rem;
  border-radius: 8px;
  color: var(--vo-ink);
  font: inherit;
  cursor: pointer;
}

.vo-ain-nav button:hover,
.vo-ain-row:hover,
.vo-ain-nav button.active {
  background: var(--vo-hover);
}

.vo-ain-count {
  margin-left: auto;
  background: var(--vo-accent);
  color: var(--vo-accent-ink);
  border-radius: 999px;
  min-width: 1.15rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  text-align: center;
}

.vo-ain-sec {
  padding: 0.35rem 0.4rem 0.15rem;
  min-height: 0;
  overflow: auto;
}

.vo-ain-sec-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--vo-ink);
  font-size: 0.92rem;
  font-weight: 650;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
}

.vo-ain-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--vo-bg);
}

.vo-ain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--vo-line);
  background: var(--vo-bg-elev);
}

.vo-ain-head h2 { margin: 0; font-size: 1.05rem; }
.vo-ain-sub { color: var(--vo-muted); font-size: 0.78rem; }

.vo-ain-tabs {
  display: flex;
  gap: 1.1rem;
  padding: 0.15rem 1.1rem;
  border-bottom: 1px solid var(--vo-line);
}

.vo-ain-tabs button {
  border: 0;
  background: transparent;
  padding: 0.55rem 0;
  color: var(--vo-muted);
  font-weight: 600;
  cursor: pointer;
}

.vo-ain-tabs button.active {
  color: var(--vo-link);
  box-shadow: inset 0 -2px 0 var(--vo-link);
}

.vo-ain-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.25rem 0.5rem;
}

.vo-ain-day {
  text-align: center;
  color: var(--vo-muted);
  font-size: 0.78rem;
  margin: 0.75rem 0;
}

.vo-ain-msg {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.45rem 0.35rem;
  border-radius: 10px;
  position: relative;
}

.vo-ain-msg:hover { background: var(--vo-hover); }

.vo-ain-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #6d5cae;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.vo-ain-msg-top { display: flex; align-items: baseline; gap: 0.5rem; }
.vo-ain-msg-top time { color: var(--vo-muted); font-size: 0.75rem; }

.vo-ain-timer,
.vo-ain-expiry {
  color: var(--vo-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.vo-time {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.vo-time-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  background: var(--vo-panel);
}

.vo-ain-upcoming {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
}

.vo-ain-timer-select {
  max-width: 8.5rem;
  font-size: 0.75rem;
  background: var(--vo-panel);
  color: var(--vo-text);
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  padding: 0.2rem 0.35rem;
}

.vo-quote {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  text-align: left;
  width: 100%;
  margin: 0.2rem 0;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-left: 3px solid var(--vo-focus);
  border-radius: 0 8px 8px 0;
  background: var(--vo-panel);
  color: inherit;
  cursor: pointer;
}

.vo-msg-highlight {
  outline: 2px solid var(--vo-focus);
  border-radius: 8px;
}

.vo-ain-quote {
  border-left: 3px solid var(--vo-focus);
  background: var(--vo-panel);
  padding: 0.35rem 0.55rem;
  border-radius: 0 8px 8px 0;
  margin: 0.3rem 0;
  color: var(--vo-muted);
  font-size: 0.85rem;
}

.vo-ain-hover {
  position: absolute;
  right: 0.35rem;
  top: 0.25rem;
  display: flex;
  opacity: 0;
  pointer-events: none;
  gap: 0.2rem;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  padding: 0.15rem;
  box-shadow: var(--vo-shadow-sm);
  z-index: 6;
}

.vo-ain-hover .vo-ain-iconbtn.on {
  color: var(--vo-link);
}

.vo-ain-msg-top {
  padding-right: 8.5rem;
  min-width: 0;
}

.vo-ain-msg-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.vo-ain-msg {
  overflow-wrap: anywhere;
}

.vo-ain-msg:hover .vo-ain-hover,
.vo-ain-msg:focus-within .vo-ain-hover,
.vo-ain-hover.open {
  opacity: 1;
  pointer-events: auto;
}

.vo-ain-quick {
  display: flex;
  gap: 0.45rem;
  padding: 0.45rem 1.1rem 0;
}

.vo-ain-quick button {
  border: 1px solid var(--vo-line);
  background: var(--vo-panel);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--vo-ink);
}

.vo-ain-compose {
  margin: 0.55rem 1.1rem 1rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
  padding: 0.45rem 0.55rem 0.55rem;
}

.vo-ain-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.vo-ain-tools button {
  border: 0;
  background: transparent;
  color: var(--vo-muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}

.vo-ain-tools button:hover { background: var(--vo-hover); color: var(--vo-ink); }

.vo-ain-compose textarea {
  width: 100%;
  border: 0;
  resize: none;
  min-height: 64px;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0.35rem 0.25rem;
}

.vo-ain-compose textarea:focus { outline: none; }

.vo-ain-sendrow {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.vo-ain-empty {
  color: var(--vo-muted);
  padding: 2rem 1rem;
  text-align: center;
}

.vo-ain-list item,
.vo-ain-file {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--vo-line);
}

@media (max-width: 860px) {
  .vo-ain { grid-template-columns: 48px minmax(0, 1fr); }
  .vo-ain-side { display: none; }
  .vo-ain.with-side .vo-ain-side { display: flex; position: absolute; inset: 0 0 0 48px; z-index: 4; }
}
.vo-pop {
  position: absolute;
  top: 4.5rem;
  left: 1.25rem;
  z-index: 8;
  width: min(380px, calc(100% - 2rem));
  max-height: min(560px, calc(100% - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--vo-panel);
  color: var(--vo-ink);
  border: 1px solid var(--vo-line);
  border-radius: 18px;
  box-shadow: var(--vo-shadow);
  overflow: hidden;
  animation: vo-pop-in 180ms ease;
}

@keyframes vo-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: none; }
}

.vo-pop-head,
.vo-pop-quick,
.vo-pop-fmt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.vo-pop-head {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--vo-line);
}

.vo-pop-who {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
}

.vo-pop-who strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-pop-icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--vo-ink);
  font: inherit;
  cursor: pointer;
}

.vo-pop-icon:hover {
  background: var(--vo-hover);
}

.vo-pop-tools .vo-pop-icon[data-knock] {
  width: auto;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.vo-pop-log {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.vo-pop-msg {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0.55rem;
  position: relative;
}

.vo-pop-msg .vo-msg-more {
  top: 0;
  right: 0;
}

.vo-pop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  font-size: var(--vo-fs-xs);
  color: var(--vo-muted);
}

.vo-pop-meta strong {
  color: var(--vo-ink);
  font-size: var(--vo-fs-sm);
}

.vo-pop-via {
  color: var(--vo-muted);
}

.vo-pop-today {
  position: absolute;
  top: -0.2rem;
  left: 2.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--vo-line);
  background: var(--vo-bg-elev);
}

.vo-pop-react {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: var(--vo-fs-sm);
}

.vo-pop-quick {
  padding: 0.35rem 0.75rem;
  border-top: 1px solid var(--vo-line);
}

.vo-pop-chip {
  border: 1px solid var(--vo-line);
  background: var(--vo-hover);
  color: var(--vo-ink);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: var(--vo-fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.vo-pop-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vo-pop-compose {
  padding: 0.45rem 0.75rem 0.75rem;
  border-top: 1px solid var(--vo-line);
}

.vo-pop-fmt {
  margin-bottom: 0.35rem;
}

.vo-pop-compose .vo-input {
  width: 100%;
}

/* =====================================================================
   Office skin (Roam-style): slim title bar, dense room tiles with round
   avatars and status dots, floating dock, quiet chat column.
   Scoped to .vo-shell so the calendar / AInbox pages keep their layout.
   ===================================================================== */

.vo-shell {
  --ro-primary: var(--vo-accent);
  --ro-primary-ink: var(--vo-accent-ink);
  --ro-tile: var(--vo-floor-card);
  --ro-tile-hover: color-mix(in srgb, var(--vo-floor-card) 92%, #fff);
  --ro-tile-line: rgba(255, 255, 255, 0.06);
  --ro-tile-line-hi: rgba(255, 255, 255, 0.18);
  --ro-chip: rgba(255, 255, 255, 0.06);
  --ro-seg-active: color-mix(in srgb, var(--vo-panel) 85%, #fff);
  --ro-glass: color-mix(in srgb, var(--vo-bg-elev) 82%, transparent);
  --ro-dock-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ro-live: #22c55e;
  --ro-busy: #f59e0b;
  --ro-away: #94a3b8;
  --ro-call: #8b5cf6;
  --ro-dnd: #ef4444;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  background: var(--vo-bg);
}

html[data-theme="light"] .vo-shell {
  --ro-tile-hover: #fbfcfe;
  --ro-tile-line: rgba(15, 23, 42, 0.08);
  --ro-tile-line-hi: rgba(15, 23, 42, 0.22);
  --ro-chip: rgba(15, 23, 42, 0.05);
  --ro-seg-active: #fff;
  --ro-glass: rgba(255, 255, 255, 0.86);
  --ro-dock-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}

@media (max-width: 960px) {
  .vo-shell {
    grid-template-columns: 1fr;
  }
}

.vo-shell * {
  scrollbar-width: thin;
  scrollbar-color: var(--ro-tile-line-hi) transparent;
}

/* ---------- title bar ---------- */

.vo-shell .vo-office-bar {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 0.75rem 0 0.9rem;
  background: var(--vo-bg-elev);
  border-bottom: 1px solid var(--vo-line);
}

.vo-shell .vo-office-bar__left,
.vo-shell .vo-office-bar__right {
  flex-wrap: nowrap;
  gap: 0.2rem;
}

.vo-shell .vo-office-bar__left {
  flex: 1 1 auto;
}

.vo-shell .vo-office-bar__right {
  flex: 0 0 auto;
}

.vo-shell .vo-office-bar .vo-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), transparent 45%),
    linear-gradient(140deg, #6366f1, #a855f7 60%, #ec4899);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.vo-shell .vo-office-bar__company {
  flex: 0 1 auto;
  margin: 0 0.25rem 0 0.4rem;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.vo-office-bar__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin: 0 0.35rem;
  background: var(--vo-line);
}

.vo-shell .vo-bar-ico {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.vo-shell .vo-bar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vo-shell .vo-office-bar .vo-btn.secondary,
.vo-shell .vo-office-bar .vo-theme-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vo-muted);
  transition: background 0.12s, color 0.12s;
}

.vo-shell .vo-office-bar .vo-btn.secondary:hover,
.vo-shell .vo-office-bar .vo-theme-btn:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
  filter: none;
}

.vo-shell .vo-office-bar [data-map-bubbles="on"] {
  color: var(--vo-ink);
}

.vo-shell .vo-office-bar .vo-btn.primary {
  height: 34px;
  padding: 0 0.95rem 0 0.75rem;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--ro-primary);
  color: var(--ro-primary-ink);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.vo-shell .vo-office-bar .vo-btn.primary .vo-bar-label {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
}

.vo-shell .vo-office-bar .vo-btn.primary:disabled {
  opacity: 0.38;
  cursor: default;
  filter: none;
}

.vo-shell .vo-reception {
  position: relative;
  height: 36px;
  margin-left: 0.4rem;
  padding: 0 0.7rem 0 0.2rem;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ro-chip);
  font-size: 0.8rem;
}

.vo-shell .vo-reception:hover,
.vo-shell .vo-reception:focus-within {
  border-color: var(--vo-line);
}

.vo-shell .vo-userchip {
  width: 28px;
  height: 28px;
  background: linear-gradient(140deg, #6366f1, #a855f7);
  color: #fff;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.vo-shell .vo-reception::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ro-live);
  box-shadow: 0 0 0 2px var(--vo-bg-elev);
}

.vo-shell .vo-reception[data-status="Busy"]::after,
.vo-shell .vo-reception[data-status="KnockRequired"]::after { background: var(--ro-busy); }
.vo-shell .vo-reception[data-status="Away"]::after { background: var(--ro-away); }
.vo-shell .vo-reception[data-status="DoNotDisturb"]::after { background: var(--ro-dnd); }

.vo-shell .vo-reception select {
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.vo-shell .vo-reception select option {
  background: var(--vo-panel);
  color: var(--vo-ink);
}

.vo-shell .vo-reception input {
  max-width: 8.5rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--vo-line);
  color: var(--vo-muted);
  outline: none;
}

.vo-shell .vo-reception input:focus {
  color: var(--vo-ink);
}

.vo-shell .vo-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ro-call) 18%, transparent);
  color: var(--ro-call);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

/* ---------- sub-header strip ---------- */

.vo-office-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.7rem 1.1rem 0;
  font-size: 0.78rem;
  color: var(--vo-muted);
}

.vo-office-strip__room {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  color: var(--vo-ink);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vo-office-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ro-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ro-live) 22%, transparent);
}

.vo-office-strip p[data-room-panel] {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--ro-chip);
}

.vo-shell .vo-guest-links {
  margin: 0;
  gap: 0.4rem;
}

.vo-shell .vo-guest-links .hint {
  display: none;
}

.vo-shell .vo-guest-links .vo-btn,
.vo-shell .vo-zoom-advanced summary {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--ro-chip);
  color: var(--vo-muted);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-shell .vo-guest-links .vo-btn.danger {
  background: color-mix(in srgb, var(--ro-dnd) 16%, transparent);
  color: var(--ro-dnd);
}

.vo-shell .vo-guest-links .vo-btn:hover,
.vo-shell .vo-zoom-advanced summary:hover {
  color: var(--vo-ink);
  filter: none;
}

.vo-shell .vo-guest-url {
  flex: 0 1 15rem;
  height: 26px;
  padding: 0 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.vo-shell .vo-zoom-advanced {
  margin: 0;
  font-size: 0.78rem;
}

.vo-shell .vo-zoom-advanced summary {
  list-style: none;
}

.vo-shell .vo-zoom-advanced summary::-webkit-details-marker {
  display: none;
}

.vo-shell .vo-zoom-advanced[open] {
  flex-basis: 100%;
  order: 10;
  padding: 0.5rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
}

.vo-shell .vo-zoom-advanced[open] .vo-zoom-bar {
  padding: 0.45rem 0 0.4rem;
}

.vo-shell .vo-cal-strip {
  padding: 0.6rem 1.1rem 0;
  gap: 0.4rem;
}

.vo-shell .vo-cal-chip {
  gap: 0.6rem;
  padding: 0.3rem 0.35rem 0.3rem 0.75rem;
  border: 1px solid var(--ro-tile-line);
  border-radius: 12px;
  background: var(--ro-tile);
  font-size: 0.78rem;
}

.vo-shell .vo-cal-chip .hint {
  display: block;
  color: var(--vo-muted);
  font-size: 0.7rem;
}

.vo-shell .vo-cal-chip .vo-btn {
  height: 28px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--ro-live);
  color: #fff;
  font-size: 0.75rem;
}

/* ---------- floor ---------- */

.vo-shell .vo-map-pane {
  background: var(--vo-floor);
}

.vo-shell .vo-floor-frame {
  padding: 0.75rem 1.1rem 1rem;
}

.vo-shell .vo-floor {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0.7rem;
  min-height: 0;
  align-content: start;
}

.vo-shell .vo-room--lead {
  grid-column: 1;
  grid-row: 1;
}

.vo-shell .vo-floor-privates {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.vo-shell .vo-floor-meetings {
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7rem;
}

@media (max-width: 1100px) {
  .vo-shell .vo-floor {
    grid-template-columns: minmax(0, 1fr);
  }

  .vo-shell .vo-floor-privates,
  .vo-shell .vo-floor-meetings,
  .vo-shell .vo-room--lead {
    grid-column: 1;
    grid-row: auto;
  }
}

.vo-shell .vo-room {
  gap: 0.65rem;
  min-height: 118px;
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid var(--ro-tile-line);
  border-radius: 14px;
  background: var(--ro-tile);
  box-shadow: none;
  font: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

html[data-theme="light"] .vo-shell .vo-room {
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.vo-shell .vo-room:hover {
  border-color: var(--ro-tile-line-hi);
  background: var(--ro-tile-hover);
}

.vo-shell .vo-room:focus-visible {
  outline: 2px solid var(--vo-own);
  outline-offset: 2px;
}

.vo-shell .vo-room--empty {
  background: var(--vo-floor-card-empty);
}

.vo-shell .vo-room--private {
  min-height: 132px;
}

.vo-shell .vo-room--lead {
  min-height: 150px;
}

.vo-shell .vo-room--meeting {
  min-height: 196px;
}

.vo-shell .vo-room--own {
  border: 1px solid color-mix(in srgb, var(--vo-own) 65%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vo-own) 30%, transparent);
}

.vo-shell .vo-room--selected:not(.vo-room--own) {
  border-color: var(--ro-tile-line-hi);
  box-shadow: inset 0 0 0 1px var(--ro-tile-line-hi);
}

.vo-shell .vo-room__label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  padding-right: 3rem;
  font-size: inherit;
}

.vo-shell .vo-room__name {
  overflow: hidden;
  color: var(--vo-ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-shell .vo-room__kind {
  overflow: hidden;
  color: var(--vo-muted);
  font-size: 0.68rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-shell .vo-room__menu {
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--vo-muted);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.vo-shell .vo-room:hover .vo-room__menu,
.vo-shell .vo-room:focus-visible .vo-room__menu {
  opacity: 1;
}

.vo-shell .vo-room__menu:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

@media (hover: none) {
  .vo-shell .vo-room__menu { opacity: 1; }
}

.vo-shell .vo-room__icon {
  top: 0.75rem;
  right: 2.2rem;
  opacity: 0.8;
}

.vo-shell .vo-room-menu {
  top: 2rem;
  right: 0.5rem;
  padding: 0.25rem;
  border-radius: 10px;
  box-shadow: var(--vo-shadow);
}

.vo-shell .vo-room-menu button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--vo-ink);
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}

.vo-shell .vo-room-menu button:hover {
  background: var(--vo-hover);
}

.vo-shell .vo-room__booking {
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ro-busy) 16%, transparent);
  color: var(--ro-busy);
  font-size: 0.68rem;
  font-weight: 600;
}

.vo-shell .vo-room__people {
  gap: 0.6rem 0.55rem;
}

.vo-shell .vo-person {
  width: 56px;
  gap: 0.3rem;
}

.vo-shell .vo-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: linear-gradient(140deg, #3b82f6, #6366f1);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--ro-tile);
  transition: transform 0.15s;
}

.vo-shell .vo-person:nth-child(6n + 2) .vo-avatar { background: linear-gradient(140deg, #ec4899, #f43f5e); }
.vo-shell .vo-person:nth-child(6n + 3) .vo-avatar { background: linear-gradient(140deg, #14b8a6, #0ea5e9); }
.vo-shell .vo-person:nth-child(6n + 4) .vo-avatar { background: linear-gradient(140deg, #f59e0b, #ef4444); }
.vo-shell .vo-person:nth-child(6n + 5) .vo-avatar { background: linear-gradient(140deg, #8b5cf6, #d946ef); }
.vo-shell .vo-person:nth-child(6n) .vo-avatar { background: linear-gradient(140deg, #10b981, #84cc16); }

.vo-shell .vo-person:hover .vo-avatar {
  transform: translateY(-1px) scale(1.04);
}

.vo-shell .vo-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ro-tile);
  background: var(--ro-live);
}

.vo-shell .vo-avatar--busy::after { background: var(--ro-busy); }
.vo-shell .vo-avatar--away::after { background: var(--ro-away); }
.vo-shell .vo-avatar--incall::after { background: var(--ro-call); }
.vo-shell .vo-avatar--dnd::after { background: var(--ro-dnd); }
.vo-shell .vo-avatar--away { filter: grayscale(0.6); opacity: 0.8; }

.vo-shell .vo-person--guest .vo-avatar {
  box-shadow: 0 0 0 2px var(--ro-tile), 0 0 0 4px var(--ro-busy);
}

.vo-shell .vo-person--talking .vo-avatar {
  animation: ro-talk 1.1s ease-in-out infinite;
}

@keyframes ro-talk {
  0%, 100% { box-shadow: 0 0 0 2px var(--ro-tile), 0 0 0 4px var(--ro-live); }
  50% { box-shadow: 0 0 0 2px var(--ro-tile), 0 0 0 8px color-mix(in srgb, var(--ro-live) 35%, transparent); }
}

.vo-shell .vo-person__name,
.vo-shell .vo-person__caption {
  max-width: 56px;
}

.vo-shell .vo-person__name {
  color: var(--vo-ink);
  font-size: 0.66rem;
  font-weight: 500;
}

.vo-shell .vo-person__caption {
  margin-top: -0.2rem;
  font-size: 0.6rem;
}

.vo-shell .vo-speech {
  padding: 2px 7px;
  border-radius: 9px;
  box-shadow: var(--vo-shadow-sm);
}

/* ---------- floors + floating dock ---------- */

.vo-shell .vo-floor-tabs {
  min-height: 62px;
  gap: 0.3rem;
  padding: 0 1.1rem;
  border-top: 1px solid var(--vo-line);
  background: var(--vo-bg-elev);
}

.vo-shell .vo-floor-tab,
.vo-shell .vo-floor-slot {
  height: 30px;
  min-width: 0;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vo-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.vo-shell .vo-floor-tab:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-shell .vo-floor-tab.active {
  background: var(--ro-chip);
  color: var(--vo-ink);
  font-weight: 600;
}

.vo-shell .vo-floor-slot {
  width: 30px;
  padding: 0;
  opacity: 0.6;
}

.vo-shell .vo-floor-slot:disabled {
  cursor: default;
}

.vo-shell .vo-floor-slot + .vo-floor-slot[disabled] {
  display: none;
}

.vo-shell .vo-dock {
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  transform: translateX(-50%);
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  background: var(--ro-glass);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--ro-dock-shadow);
}

.vo-shell .vo-dock > div:empty {
  display: none;
}

.vo-shell .vo-dock__center,
.vo-shell .vo-dock__right {
  gap: 0.2rem;
}

.vo-shell .vo-dock__right {
  padding-left: 0.3rem;
  border-left: 1px solid var(--vo-line);
}

.vo-shell .vo-dock-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--vo-ink);
  font-size: 0.7rem;
  transition: background 0.12s;
}

.vo-shell .vo-dock-btn svg {
  width: 18px;
  height: 18px;
}

.vo-shell .vo-dock-btn:hover:not(:disabled) {
  background: var(--vo-hover);
}

.vo-shell .vo-dock-btn:disabled {
  opacity: 0.35;
}

.vo-shell .vo-dock-btn.danger {
  background: var(--ro-dnd);
  color: #fff;
}

.vo-shell .vo-dock-btn.danger:disabled {
  background: transparent;
  color: var(--vo-muted);
}

@media (max-width: 960px) {
  .vo-shell .vo-dock {
    position: static;
    transform: none;
    justify-content: center;
    margin: 0 auto 0.5rem;
  }

  .vo-shell .vo-floor-tabs {
    min-height: 46px;
  }

  .vo-shell .vo-reception input,
  .vo-shell .vo-office-bar__company {
    display: none;
  }
}

/* ---------- chat column ---------- */

.vo-shell .vo-chat-pane {
  background: var(--vo-bg-elev);
  border-left: 1px solid var(--vo-line);
}

.vo-shell .vo-chat-collapse {
  top: 0.6rem;
  left: 0.55rem;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vo-muted);
  font-size: 1.1rem;
}

.vo-shell .vo-chat-collapse:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-shell .vo-chat-tabs {
  gap: 2px;
  margin: 0.55rem 0.7rem 0.4rem 2.6rem;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: var(--ro-chip);
}

.vo-shell .vo-chat-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  color: var(--vo-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-shell .vo-chat-tabs button:hover {
  color: var(--vo-ink);
}

.vo-shell .vo-chat-tabs button.active {
  background: var(--ro-seg-active);
  color: var(--vo-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.vo-shell .vo-unread {
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  background: var(--ro-dnd);
  color: #fff;
  font-size: 0.66rem;
}

.vo-shell .vo-chat-list {
  max-height: 34%;
  padding: 0.15rem 0.45rem 0.45rem;
  border-bottom: 1px solid var(--vo-line);
}

.vo-shell .vo-chat-item {
  gap: 0.05rem;
  padding: 0.42rem 0.6rem;
  border: 0;
  border-radius: 8px;
  color: var(--vo-ink);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}

.vo-shell .vo-chat-item strong {
  font-weight: 600;
}

.vo-shell .vo-chat-item.active {
  background: var(--ro-chip);
}

.vo-shell .vo-chat-item .hint {
  color: var(--vo-muted);
  font-size: 0.72rem;
}

.vo-shell .vo-chat-preview {
  font-size: 0.74rem;
}

.vo-chat-tools {
  margin: 0.2rem 0.15rem 0;
}

.vo-chat-tools summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 7px;
  color: var(--vo-muted);
  font-size: 0.74rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.vo-chat-tools summary::-webkit-details-marker {
  display: none;
}

.vo-chat-tools summary::before {
  content: "+";
  font-size: 0.95rem;
  line-height: 1;
}

.vo-chat-tools[open] summary::before {
  content: "\2212";
}

.vo-chat-tools summary:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-chat-tools__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.4rem 0.2rem 0.2rem;
}

.vo-chat-tools__row {
  display: flex;
  gap: 0.4rem;
}

.vo-chat-tools__row .vo-input {
  min-width: 0;
}

.vo-shell .vo-chat-pane .vo-input {
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
}

.vo-shell .vo-chat-pane .vo-btn.secondary {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: var(--ro-chip);
  font-size: 0.78rem;
}

.vo-shell .vo-thread-bar,
.vo-shell .vo-channel-bar {
  padding: 0.5rem 0.8rem;
  background: transparent;
  font-size: 0.86rem;
}

.vo-shell .vo-chat-messages {
  gap: 0.1rem;
  padding: 0.6rem 0.45rem;
  background: transparent;
}

.vo-shell .vo-msg {
  max-width: 100%;
  padding: 0.45rem 2.2rem 0.45rem 0.6rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 0.86rem;
  line-height: 1.45;
}

.vo-shell .vo-msg:hover,
.vo-shell .vo-msg.menu-open {
  background: var(--vo-hover);
}

.vo-shell .vo-msg.bookmarked {
  box-shadow: inset 2px 0 0 var(--ro-busy);
}

.vo-shell .vo-msg .meta {
  margin-bottom: 0.1rem;
  font-size: 0.7rem;
}

.vo-shell .vo-msg-kebab {
  width: 26px;
  height: 26px;
  background: var(--vo-panel);
  color: var(--vo-muted);
  opacity: 0;
  transition: opacity 0.12s;
}

.vo-shell .vo-msg:hover .vo-msg-kebab,
.vo-shell .vo-msg-more.open .vo-msg-kebab {
  opacity: 1;
}

.vo-shell .vo-msg-actions {
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.vo-shell .vo-react-add {
  height: 22px;
  padding: 0 0.5rem;
  border: 1px solid var(--vo-line);
  border-radius: 999px;
  background: transparent;
  color: var(--vo-muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.vo-shell .vo-react-add:hover {
  color: var(--vo-ink);
  border-color: var(--ro-tile-line-hi);
}

.vo-shell .vo-msg-preview {
  border-radius: 10px;
}

.vo-shell .vo-chat-compose {
  gap: 0.3rem;
  padding: 0.45rem 0.6rem 0.7rem;
  border-top: 0;
  background: transparent;
}

.vo-shell .vo-compose-row {
  align-items: flex-end;
  gap: 0.15rem;
  padding: 0.3rem;
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  background: var(--vo-input);
  transition: border-color 0.12s;
}

.vo-shell .vo-compose-row:focus-within {
  border-color: var(--ro-tile-line-hi);
}

.vo-shell .vo-chat-compose input,
.vo-shell .vo-chat-compose textarea {
  align-self: center;
  padding: 0.4rem 0.35rem;
  border: 0;
  background: transparent;
  font-size: 0.86rem;
  outline: none;
}

.vo-shell .vo-compose-row .vo-icon-btn {
  border-radius: 9px;
  background: transparent;
  color: var(--vo-muted);
}

.vo-shell .vo-compose-row .vo-icon-btn:hover:not(:disabled) {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-shell .vo-compose-row .vo-icon-btn.primary {
  background: var(--ro-primary);
  color: var(--ro-primary-ink);
}

.vo-shell .vo-compose-row .vo-icon-btn.primary:hover:not(:disabled) {
  background: var(--ro-primary);
  color: var(--ro-primary-ink);
  filter: brightness(1.08);
}

.vo-shell .vo-compose-row .vo-icon-btn.primary:disabled {
  opacity: 0.3;
}

.vo-shell .vo-chat-compose .vo-quote {
  border: 0;
  border-radius: 8px;
  background: var(--ro-chip);
  color: var(--vo-muted);
  text-align: left;
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem;
}

.vo-shell .vo-typing {
  margin: -0.4rem 0.9rem 0.5rem;
  color: var(--vo-muted);
  font-size: 0.72rem;
}

.vo-shell .vo-chat-compose .vo-upload-error {
  margin: 0 0.2rem;
  font-size: 0.74rem;
}

.vo-shell .vo-empty {
  font-size: 0.8rem;
}

/* ---------- calendar ---------- */

.vo-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--vo-hover);
}

.vo-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vo-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-seg button:hover {
  color: var(--vo-ink);
}

.vo-seg button.active {
  background: var(--vo-panel);
  color: var(--vo-ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
}

.vo-seg button:has(svg) {
  padding: 0 0.45rem;
}

.vo-page.vo-cal-page {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.5rem 1.25rem;
}

.vo-cal-page .vo-cal-head {
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0;
}

.vo-cal-title {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  min-width: 0;
}

.vo-cal-title h1 {
  margin: 0;
  font-size: 1.45rem;
}

.vo-cal-page .vo-cal-range {
  margin: 0;
  color: var(--vo-muted);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.vo-cal-page .vo-cal-toolbar {
  gap: 0.5rem;
}

.vo-cal-page .vo-cal-zone {
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.2rem 0 0.6rem;
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  background: var(--vo-panel);
}

.vo-cal-page .vo-cal-zone .vo-input {
  min-width: 0;
  max-width: 11rem;
  padding: 0 0.3rem;
  border: 0;
  background: transparent;
  font-size: 0.82rem;
  outline: none;
}

.vo-cal-page .vo-btn {
  height: 36px;
  padding: 0 0.9rem;
  border-radius: 10px;
  font-size: 0.84rem;
}

.vo-cal-page .vo-btn.primary {
  gap: 0.35rem;
  padding: 0 1rem 0 0.8rem;
  background: var(--vo-accent);
  color: var(--vo-accent-ink);
}

.vo-cal-ghost {
  border: 1px solid var(--vo-line) !important;
  background: var(--vo-panel) !important;
  color: var(--vo-ink) !important;
}

.vo-cal-import {
  position: relative;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
}

.vo-cal-import input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.vo-cal-sub {
  margin: -0.15rem 0 0;
  color: var(--vo-muted);
  font-size: 0.78rem;
}

.vo-cal-page .vo-cal-board {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: 14px;
  box-shadow: var(--vo-shadow-sm);
}

.vo-cal-page .vo-cal-board-scroll {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

.vo-cal-page .vo-cal-dayhead {
  padding: 0.6rem 0.6rem 0.55rem;
  color: var(--vo-muted);
  font-size: 0.8rem;
  font-weight: 600;
  border-left: 1px solid var(--vo-line);
}

.vo-cal-page .vo-cal-dayhead.today {
  outline: 0;
  color: var(--vo-accent);
  box-shadow: inset 0 -2px 0 var(--vo-accent);
}

.vo-cal-page .vo-cal-gutter div {
  padding: 0 0.5rem;
  text-align: right;
  transform: translateY(-0.55em);
  font-size: 0.7rem;
}

.vo-cal-page .vo-cal-gutter div:first-child {
  visibility: hidden;
}

.vo-cal-page .vo-cal-event {
  left: 3px;
  right: 3px;
  padding: 0.25rem 0.45rem;
  border-left: 3px solid var(--vo-accent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--vo-accent) 16%, var(--vo-panel));
  color: var(--vo-ink);
  font-size: 0.74rem;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.vo-cal-page .vo-cal-event strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-cal-page .vo-cal-event span[data-cal-rsvp]:empty {
  display: none;
}

.vo-cal-page .vo-cal-month {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  background: var(--vo-line);
}

.vo-cal-page .vo-cal-dow {
  padding: 0.5rem 0.6rem;
  background: var(--vo-panel);
  border-bottom: 1px solid var(--vo-line);
  font-weight: 600;
}

.vo-cal-page .vo-cal-mday {
  min-height: 6.5rem;
  margin: 0 0 1px 1px;
  border: 0;
  border-radius: 0;
}

.vo-cal-page .vo-cal-mday > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
}

.vo-cal-page .vo-cal-mday.today {
  outline: 0;
}

.vo-cal-page .vo-cal-mday.today > span:first-child {
  background: var(--vo-accent);
  color: var(--vo-accent-ink);
}

.vo-cal-page .vo-cal-agenda-row {
  padding: 0.85rem 1rem;
  border-radius: 12px;
}

.vo-cal-page .vo-cal-agenda-row .vo-btn {
  height: 30px;
  padding: 0 0.7rem;
  font-size: 0.78rem;
}

.vo-cal-scrim {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(15, 23, 42, 0.35);
  animation: vo-fade-in 140ms ease;
}

.vo-cal-page .vo-cal-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(440px, 100vw);
  max-width: none;
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  overflow: auto;
  border-radius: 16px 0 0 16px;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.25);
  animation: vo-drawer-in 180ms ease;
}

.vo-cal-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -1.25rem 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--vo-line);
  background: var(--vo-panel);
}

.vo-cal-drawer-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.vo-cal-x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vo-muted);
  cursor: pointer;
}

.vo-cal-x:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-cal-drawer .form-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.vo-cal-drawer .form-check {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

.vo-cal-drawer .form-check:hover {
  background: var(--vo-hover);
}

.vo-cal-drawer [data-weekdays] .form-check {
  display: inline-flex !important;
}

.vo-cal-drawer .vo-cal-row-actions {
  position: sticky;
  bottom: -1.25rem;
  margin: 0.5rem -1.25rem -1.25rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--vo-line);
  background: var(--vo-panel);
}

@keyframes vo-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes vo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 800px) {
  .vo-page.vo-cal-page {
    padding: 0.9rem 1rem;
  }

  .vo-cal-page .vo-cal-drawer {
    border-radius: 0;
  }
}

/* ---------- call overlay + control bar ---------- */

.vo-call-overlay {
  border-radius: 18px;
}

.vo-call-head .vo-call-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.vo-call-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

.vo-call-head .vo-call-room {
  margin-left: 0;
}

.vo-call-head .vo-seg.vo-call-views {
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.vo-call-overlay .vo-call-actions {
  margin-top: 0.75rem;
}

.vo-call-overlay .vo-call-cluster {
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--vo-line);
  border-radius: 16px;
  background: var(--vo-bg-elev);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.vo-call-overlay .vo-call-btn,
.vo-call-overlay .vo-call-chevron {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: transparent;
  color: var(--vo-ink);
  transition: background 0.12s, color 0.12s;
}

.vo-call-overlay .vo-call-btn:hover,
.vo-call-overlay .vo-call-chevron:hover,
.vo-call-overlay .vo-call-btn[aria-expanded="true"],
.vo-call-overlay .vo-call-chevron[aria-expanded="true"] {
  background: var(--vo-hover);
}

.vo-call-overlay .vo-call-split {
  border-radius: 12px;
}

.vo-call-overlay .vo-call-split:has(> .vo-call-chevron):hover {
  background: var(--vo-hover);
}

.vo-call-overlay .vo-call-split > .vo-call-btn {
  border-radius: 12px;
}

.vo-call-overlay .vo-call-split > .vo-call-btn:has(~ .vo-call-chevron) {
  width: 38px;
  min-width: 38px;
  border-radius: 12px 0 0 12px;
}

.vo-call-overlay .vo-call-chevron {
  width: 20px;
  min-width: 20px;
  margin-left: 0;
  border-radius: 0 12px 12px 0;
  color: var(--vo-muted);
}

.vo-call-overlay .vo-call-chevron svg {
  width: 14px;
  height: 14px;
}

.vo-call-overlay .vo-call-split:has(> .vo-call-chevron) .vo-call-btn:hover,
.vo-call-overlay .vo-call-split:has(> .vo-call-chevron) .vo-call-chevron:hover {
  background: transparent;
}

.vo-call-overlay .vo-call-btn.is-off {
  background: color-mix(in srgb, var(--vo-danger) 14%, transparent);
  color: var(--vo-danger);
}

.vo-call-overlay .vo-call-btn.is-on {
  background: var(--vo-accent);
  color: var(--vo-accent-ink, #fff);
}

.vo-call-overlay .vo-call-leave {
  height: 42px;
  padding: 0 1.1rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--vo-danger) 35%, transparent);
}

.vo-call-overlay .vo-call-leave:hover {
  filter: brightness(1.08);
}

.vo-call-overlay .vo-call-menu {
  bottom: calc(100% + 10px);
  padding: 0.3rem;
  border-radius: 12px;
}

.vo-call-overlay .vo-call-menu button {
  font-size: 0.82rem;
}

.vo-call-overlay .vo-call-menu button:hover {
  background: var(--vo-hover);
}

.vo-call-overlay .vo-call-reacts {
  grid-template-columns: repeat(4, 2.25rem);
  gap: 2px;
}

.vo-call-overlay .vo-call-reacts button {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.15rem;
}

/* ---------- AInbox composer ---------- */

.vo-ain-compose {
  margin: 0.5rem 1.1rem 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.vo-ain-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  background: var(--vo-panel);
  box-shadow: var(--vo-shadow-sm);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.vo-ain-box:focus-within {
  border-color: color-mix(in srgb, var(--vo-accent) 55%, var(--vo-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vo-accent) 14%, transparent);
}

.vo-ain-compose .vo-ain-box textarea.vo-compose-input {
  width: 100%;
  min-height: 46px;
  max-height: calc(1.4em * 8 + 1rem);
  padding: 0.7rem 0.85rem 0.3rem;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: transparent;
  font-size: 0.92rem;
  line-height: 1.4;
}

.vo-ain-box-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem 0.4rem;
}

.vo-ain-compose .vo-ain-tools {
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
}

.vo-ain-compose .vo-ain-tools button,
.vo-ain-compose .vo-ain-tools .vo-attach {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vo-muted);
  cursor: pointer;
}

.vo-ain-compose .vo-ain-tools button:hover,
.vo-ain-compose .vo-ain-tools .vo-attach:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-ain-tools__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 0.25rem;
  background: var(--vo-line);
}

.vo-ain-compose .vo-ain-sendrow {
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
}

.vo-ain-sched {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vo-muted);
  cursor: pointer;
}

.vo-ain-sched:hover,
.vo-ain-sched.on {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-ain-send {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  padding: 0 0.85rem 0 0.7rem;
  border: 0;
  border-radius: 9px;
  background: var(--vo-accent);
  color: var(--vo-accent-ink, #fff);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s, opacity 0.12s;
}

.vo-ain-send:hover:not(:disabled) {
  filter: brightness(1.08);
}

.vo-ain-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.vo-ain-file-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  max-width: calc(100% - 1.2rem);
  margin: 0.55rem 0.6rem 0;
  padding: 0.25rem 0.3rem 0.25rem 0.55rem;
  border-radius: 8px;
  background: var(--vo-hover);
  font-size: 0.78rem;
}

.vo-ain-file-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-ain-file-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--vo-muted);
  cursor: pointer;
}

.vo-ain-compose [data-schedule-when] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  color: var(--vo-accent);
  font-size: 0.76rem;
  font-weight: 600;
}

.vo-ain-compose [data-schedule-when] button {
  border: 0;
  background: transparent;
  color: var(--vo-muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.vo-ain-compose [data-schedule-presets] {
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5rem 0 0;
}

.vo-ain-compose [data-schedule-presets] .vo-input {
  width: auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.vo-ain-quick button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
}

.vo-ain-quick button:hover {
  border-color: color-mix(in srgb, var(--vo-accent) 40%, var(--vo-line));
}

/* ---------- chat popup ---------- */

.vo-pop {
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.08);
}

.vo-pop .vo-pop-head {
  gap: 0.5rem;
  padding: 0.6rem 0.6rem 0.6rem 0.85rem;
}

.vo-pop .vo-pop-who {
  justify-content: flex-start;
  gap: 0.6rem;
}

.vo-pop .vo-pop-who .vo-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.vo-pop-who__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.vo-pop-who__text strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-pop-who__text span {
  color: var(--vo-muted);
  font-size: 0.72rem;
}

.vo-pop .vo-pop-tools {
  display: flex;
  gap: 2px;
}

.vo-pop .vo-pop-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--vo-muted);
}

.vo-pop .vo-pop-icon:hover:not(:disabled) {
  color: var(--vo-ink);
}

.vo-pop .vo-pop-icon:disabled {
  opacity: 0.35;
  cursor: default;
}

.vo-pop .vo-pop-quick {
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
}

.vo-pop .vo-pop-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  background: var(--vo-panel);
  color: var(--vo-ink);
  font-size: 0.78rem;
  font-weight: 500;
}

.vo-pop .vo-pop-chip:hover:not(:disabled) {
  background: var(--vo-hover);
}

.vo-pop .vo-pop-compose {
  padding: 0.4rem 0.6rem 0.65rem;
}

.vo-pop .vo-pop-fmt {
  gap: 1px;
  margin-bottom: 0.3rem;
}

.vo-pop .vo-pop-fmt .vo-pop-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 0.8rem;
}

.vo-pop .vo-compose-row {
  align-items: flex-end;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-input);
}

.vo-pop .vo-compose-row:focus-within {
  border-color: color-mix(in srgb, var(--vo-accent) 55%, var(--vo-line));
}

.vo-pop .vo-compose-row textarea {
  align-self: center;
  border: 0;
  background: transparent;
  outline: none;
}

.vo-pop .vo-compose-row .vo-icon-btn.primary {
  border-radius: 9px;
}

/* ---------- threads + channel manage ---------- */

.vo-thread-bar__title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.vo-thread-bar__title span {
  color: var(--vo-muted);
  font-size: 0.72rem;
}

.vo-thread-root {
  margin: 0.15rem 0.15rem 0;
  padding: 0.65rem 0.75rem 0.6rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
  font-size: 0.86rem;
}

.vo-thread-root__label {
  margin-bottom: 0.2rem;
  color: var(--vo-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vo-thread-root .meta {
  margin-bottom: 0.15rem;
  color: var(--vo-muted);
  font-size: 0.72rem;
}

.vo-thread-root .meta strong,
.vo-msg .meta strong {
  color: var(--vo-ink);
  font-weight: 600;
}

.vo-thread-root img,
.vo-thread-root video {
  max-width: 100%;
  border-radius: 10px;
}

.vo-thread-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0.2rem 0.2rem;
  color: var(--vo-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.vo-thread-divider::before,
.vo-thread-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vo-line);
}

.vo-msg.vo-msg--reply {
  margin-left: 0.9rem;
  border-left: 2px solid var(--vo-line);
  border-radius: 0 10px 10px 0;
}

.vo-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 22px;
  padding: 0 0.5rem 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vo-accent) 12%, transparent);
  color: var(--vo-accent);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-reply-link:hover {
  background: color-mix(in srgb, var(--vo-accent) 20%, transparent);
}

.vo-reply-link .vo-glyph {
  width: 13px;
  height: 13px;
}

.vo-channel-bar {
  position: relative;
  justify-content: space-between;
}

.vo-channel-manage summary {
  padding: 0.2rem 0.55rem;
  border-radius: 7px;
  color: var(--vo-muted);
  font-size: 0.74rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.vo-channel-manage summary::-webkit-details-marker {
  display: none;
}

.vo-channel-manage summary:hover,
.vo-channel-manage[open] summary {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-channel-manage__menu {
  position: absolute;
  right: 0.6rem;
  top: calc(100% + 4px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(270px, calc(100% - 1.2rem));
  padding: 0.75rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
  box-shadow: var(--vo-shadow);
}

.vo-channel-manage__menu label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--vo-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.vo-channel-manage__row {
  display: flex;
  gap: 0.35rem;
}

.vo-channel-manage__row .vo-input {
  min-width: 0;
}

.vo-channel-manage__menu .vo-btn.danger {
  justify-content: center;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--vo-danger) 12%, transparent);
  color: var(--vo-danger);
  font-size: 0.78rem;
}

/* ---------- reply quote ---------- */

.vo-quote {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
  margin: 0.15rem 0 0.3rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-left: 3px solid color-mix(in srgb, var(--vo-accent) 70%, transparent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--vo-accent) 7%, var(--vo-panel));
  font: inherit;
  text-align: left;
}

.vo-quote:hover {
  background: color-mix(in srgb, var(--vo-accent) 12%, var(--vo-panel));
}

.vo-quote__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.vo-quote__who {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--vo-muted);
  font-size: 0.7rem;
}

.vo-quote__who strong {
  color: var(--vo-ink);
  font-weight: 600;
}

.vo-quote__who .vo-glyph {
  width: 12px;
  height: 12px;
  transform: scaleY(-1);
}

.vo-quote__line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.vo-quote__text {
  overflow: hidden;
  color: var(--vo-ink);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-quote__text.muted {
  color: var(--vo-muted);
  font-style: italic;
}

.vo-quote__file {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.1rem 0.45rem 0.1rem 0.35rem;
  overflow: hidden;
  border: 1px solid var(--vo-line);
  border-radius: 6px;
  background: var(--vo-panel);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-quote__file .vo-glyph {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--vo-muted);
}

.vo-quote__tag {
  flex: 0 0 auto;
  color: var(--vo-muted);
  font-size: 0.68rem;
}

/* Long URLs and tokens must wrap instead of widening chat bubbles. */
.vo-pop-log { overflow-x: hidden; }
.vo-pop-msg > div,
.vo-msg,
.vo-thread-root,
.vo-ain-msg { min-width: 0; overflow-wrap: anywhere; }

/* ---------- AInbox: icons, lists, filters, hover bar ---------- */

.vo-ain-rail button {
  flex-direction: column;
  gap: 0.2rem;
}

.vo-ain-rail button > .vo-glyph {
  width: 18px;
  height: 18px;
}

.vo-ain-rail-label {
  font-size: 0.62rem;
  font-weight: 600;
}

.vo-ain-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vo-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.vo-ain-iconbtn:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-ain-iconbtn.on {
  color: var(--vo-accent);
}

.vo-ain-iconbtn.primary {
  background: var(--vo-accent);
  color: var(--vo-accent-ink, #fff);
}

.vo-ain-iconbtn.primary:hover {
  background: var(--vo-accent);
  color: var(--vo-accent-ink, #fff);
  filter: brightness(1.08);
}

.vo-ain-iconbtn.danger:hover {
  background: color-mix(in srgb, var(--vo-danger) 12%, transparent);
  color: var(--vo-danger);
}

.vo-ain-ico {
  display: inline-grid;
  place-items: center;
  width: 18px;
  color: var(--vo-muted);
}

.vo-ain-head {
  align-items: center;
}

.vo-ain-head .vo-ain-sub {
  margin: 0.1rem 0 0;
}

.vo-ain-head-actions,
.vo-ain-head .vo-ain-quick {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
}

/* hover toolbar on a message */
.vo-ain-msg {
  position: relative;
}

.vo-ain-msg .vo-ain-hover {
  top: -0.85rem;
  right: 0.75rem;
  gap: 1px;
  padding: 2px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  transition: opacity 0.1s;
}

.vo-ain-msg .vo-ain-hover .vo-ain-iconbtn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.vo-ain-msg .vo-ain-hover .vo-glyph {
  width: 16px;
  height: 16px;
}

.vo-ain-msg-top {
  padding-right: 0;
}

.vo-msg-toolbar .vo-emoji-picker {
  position: absolute;
  top: 1.4rem;
  right: 0.75rem;
  z-index: 8;
}

/* tabs inside a conversation */
.vo-ain-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.vo-ain-tabs button .vo-glyph {
  width: 14px;
  height: 14px;
}

/* generic list rows (saved, later, directories, threads) */
.vo-ain-list,
.vo-ain-filelist {
  gap: 0.35rem;
}

.vo-ain-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
  color: var(--vo-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.vo-ain-item:hover {
  border-color: color-mix(in srgb, var(--vo-accent) 35%, var(--vo-line));
  box-shadow: var(--vo-shadow-sm);
}

.vo-ain-item-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.vo-ain-item-main strong,
.vo-ain-item-main .vo-ain-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-ain-item-end {
  color: var(--vo-accent);
}

.vo-ain-item-open {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vo-ain-av.hash {
  background: color-mix(in srgb, var(--vo-accent) 14%, var(--vo-panel));
  color: var(--vo-accent);
  font-weight: 700;
}

.vo-ain-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.vo-ain-log h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0.35rem;
  color: var(--vo-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vo-ain-log h3:first-child {
  margin-top: 0;
}

.vo-ain-log h3 span {
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--vo-hover);
  letter-spacing: 0;
}

/* files and links */
.vo-ain-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem 0.25rem;
}

.vo-ain-filters .vo-seg {
  align-self: flex-start;
}

.vo-ain-filters .vo-seg button {
  gap: 0.35rem;
}

.vo-ain-filters .vo-seg button .vo-glyph {
  width: 14px;
  height: 14px;
}

.vo-ain-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.vo-ain-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.6rem;
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  background: var(--vo-panel);
  color: var(--vo-muted);
  transition: border-color 0.12s;
}

.vo-ain-field:focus-within {
  border-color: color-mix(in srgb, var(--vo-accent) 55%, var(--vo-line));
}

.vo-ain-field .vo-glyph {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.vo-ain-field select,
.vo-ain-field input {
  min-width: 0;
  max-width: 12rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vo-ink);
  font: inherit;
  font-size: 0.82rem;
  outline: none;
}

.vo-ain-field--date input {
  max-width: 8.5rem;
}

.vo-ain-range-dash {
  color: var(--vo-muted);
}

.vo-ain-filelist .vo-ain-file {
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--vo-line);
  border-radius: 12px;
  background: var(--vo-panel);
}

.vo-ain-filelist .vo-ain-file:hover {
  border-color: color-mix(in srgb, var(--vo-accent) 35%, var(--vo-line));
}

.vo-ain-filetype {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vo-accent) 10%, var(--vo-panel));
  color: var(--vo-accent);
}

.vo-ain-filetype.is-image {
  background: color-mix(in srgb, #10b981 14%, var(--vo-panel));
  color: #059669;
}

.vo-ain-filetype .vo-glyph {
  width: 18px;
  height: 18px;
}

.vo-ain-file-main {
  flex: 1 1 auto;
  min-width: 0;
}

.vo-ain-file-main strong,
.vo-ain-file-main a {
  display: block;
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-ain-more-btn,
.vo-ain-back {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.35rem;
  margin: 0.25rem auto;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--vo-line);
  border-radius: 999px;
  background: var(--vo-panel);
  color: var(--vo-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-ain-back {
  align-self: flex-start;
  margin: 0 0 0.25rem;
}

.vo-ain-more-btn:hover,
.vo-ain-back:hover {
  color: var(--vo-ink);
}

/* composer surroundings */
.vo-ain-actionbar {
  gap: 2px;
  padding: 0.45rem 1.1rem 0;
}

.vo-ain-actionbar .vo-ain-iconbtn {
  border: 1px solid var(--vo-line);
  background: var(--vo-panel);
}

.vo-ain-replybar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem 1.1rem 0;
  padding: 0.3rem 0.3rem 0.3rem 0.65rem;
  border-left: 3px solid var(--vo-accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--vo-accent) 8%, var(--vo-panel));
  color: var(--vo-muted);
  font-size: 0.8rem;
}

.vo-ain-replybar > span {
  flex: 1 1 auto;
}

.vo-ain-replybar strong {
  color: var(--vo-ink);
}

/* upcoming events in the sidebar */
.vo-ain-upcoming > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
}

.vo-ain-upcoming-actions {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}

.vo-ain-upcoming-actions .vo-ain-iconbtn {
  width: 26px;
  height: 26px;
}

/* ---------- chat popup as a balloon over the clicked person ---------- */

.vo-pop[data-anchored] {
  overflow: visible;
  max-height: min(480px, calc(100% - 1rem));
  transition: top 0.12s ease, left 0.12s ease;
}

.vo-pop[data-anchored] > .vo-pop-head {
  border-radius: 16px 16px 0 0;
}

.vo-pop[data-anchored] > :last-child {
  border-radius: 0 0 16px 16px;
}

.vo-pop[data-anchored]::before {
  content: "";
  position: absolute;
  left: var(--vo-tip-x, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--vo-panel);
  border: 1px solid var(--vo-line);
  transform: rotate(45deg);
  z-index: 1;
}

.vo-pop[data-anchored="below"]::before {
  top: -8px;
  border-right: 0;
  border-bottom: 0;
}

.vo-pop[data-anchored="above"]::before {
  bottom: -8px;
  border-top: 0;
  border-left: 0;
}

.vo-pop[data-anchored="below"] {
  animation: vo-balloon-down 160ms ease;
}

.vo-pop[data-anchored="above"] {
  animation: vo-balloon-up 160ms ease;
}

@keyframes vo-balloon-down {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes vo-balloon-up {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* "Today" separator in the chat popup: its own centred row, not on top of the sender name. */
.vo-pop .vo-pop-today {
  position: static;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0 0 0.15rem;
  color: var(--vo-muted);
  font-size: 0.66rem;
}

/* Icon buttons inside the older pill rows keep their square size. */
.vo-ain-quick .vo-ain-iconbtn,
.vo-ain-row-actions .vo-ain-iconbtn,
.vo-ain-head .vo-ain-iconbtn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  font-size: inherit;
}

.vo-ain-iconbtn .vo-glyph {
  flex: none;
  width: 16px;
  height: 16px;
}

.vo-ain-actionbar .vo-ain-iconbtn {
  border-radius: 999px;
}

/* Locked-room badge sits in the top-right corner, beside the menu, not over the name. */
.vo-shell .vo-room__lock {
  top: 0.62rem;
  right: 2.1rem;
  left: auto;
  font-size: 0.8rem;
}

.vo-shell .vo-room--locked .vo-room__label {
  padding-left: 0;
  padding-right: 4rem;
}

.vo-shell .vo-room--locked {
  border-style: dashed;
}

.vo-seen {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  color: var(--vo-muted);
  font-size: 0.7rem !important;
}

.vo-seen .vo-glyph {
  width: 13px;
  height: 13px;
  color: var(--vo-accent);
}

/* Hover actions beside the message menu: reaction + reply sit left of the three dots. */
.vo-msg-quick {
  position: absolute;
  top: 0.3rem;
  right: 2.15rem;
  z-index: 4;
  display: flex;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}

.vo-msg:hover .vo-msg-quick,
.vo-msg:focus-within .vo-msg-quick,
.vo-msg-quick.open {
  opacity: 1;
  pointer-events: auto;
}

.vo-msg-quick-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--vo-panel);
  color: var(--vo-muted);
  cursor: pointer;
}

.vo-msg-quick-btn:hover {
  background: var(--vo-hover);
  color: var(--vo-ink);
}

.vo-msg-quick .vo-emoji-picker {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 8;
}

.vo-shell .vo-msg {
  padding-right: 4.4rem;
}

/* @ mention picker above the chat composer */
.vo-chat-compose { position: relative; }
.vo-mention-pick {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  background: var(--vo-panel); color: var(--vo-ink);
  border: 1px solid var(--vo-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.vo-mention-pick button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 7px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vo-mention-pick button:hover, .vo-mention-pick button.active { background: var(--vo-accent-soft, rgba(99,102,241,.12)); }
.vo-mention-pick__av {
  flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff; background: var(--vo-accent, #6366f1);
}
.vo-mention-pick__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-mention-pick__sub { margin-left: auto; font-size: 12px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* AInbox sidebar: room chats get a small icon link instead of "Room Open room" text */
.vo-ain-roomlink {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; color: var(--vo-muted, currentColor); opacity: .7;
}
.vo-ain-roomlink:hover { opacity: 1; background: var(--vo-accent-soft, rgba(99,102,241,.12)); color: var(--vo-accent, inherit); }
.vo-ain-roomlink svg { width: 14px; height: 14px; }
.vo-ain-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AInbox Threads: one card per thread with where, root message and reply count */
.vo-ain-threads { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.vo-ain-thread {
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 760px;
  padding: 12px 14px; text-align: left; font: inherit; color: var(--vo-ink); cursor: pointer;
  background: var(--vo-panel); border: 1px solid var(--vo-line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.vo-ain-thread:hover { border-color: var(--vo-accent); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.vo-ain-thread.unread { border-left: 3px solid var(--vo-accent); }
.vo-ain-thread__where { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--vo-muted); }
.vo-ain-thread__where .vo-glyph { width: 13px; height: 13px; }
.vo-ain-thread__where time { margin-left: auto; font-weight: 400; }
.vo-ain-thread__root { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.vo-ain-thread__root .vo-ain-av { flex: 0 0 32px; width: 32px; height: 32px; }
.vo-ain-thread__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-ain-thread__body strong { font-size: 14px; }
.vo-ain-thread__text {
  font-size: 14px; line-height: 1.4; color: var(--vo-ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vo-ain-thread__foot { display: flex; align-items: center; gap: 6px; padding-left: 42px; font-size: 12px; font-weight: 600; color: var(--vo-accent); }
.vo-ain-thread__foot .vo-glyph { width: 13px; height: 13px; }
.vo-ain-thread__foot .vo-ain-count { margin-left: 4px; width: auto; padding: 0 7px; }
.vo-ain-threads .vo-ain-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 0; color: var(--vo-muted); }
.vo-ain-threads .vo-ain-empty .vo-glyph { width: 28px; height: 28px; }

/* AInbox thread view: header, original message, reply divider */
.vo-ain-threadhead { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; }
.vo-ain-threadhead strong { font-size: 15px; }
.vo-ain-threadroot {
  margin: 0 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--vo-accent-soft); border: 1px solid var(--vo-line);
}
.vo-ain-threaddiv { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; font-size: 12px; font-weight: 600; color: var(--vo-muted); }
.vo-ain-threaddiv::after { content: ""; flex: 1; height: 1px; background: var(--vo-line); }
.vo-ain-av { color: #fff; }

/* Magicasts page: header with search + New recording, collapsible recorder, library grid */
.vo-cast-page { max-width: 1120px; }
.vo-cast-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vo-cast-top h1 { margin: 0 0 4px; font-size: 24px; }
.vo-cast-sub { margin: 0; color: var(--vo-muted); font-size: 14px; }
.vo-cast-top__actions { display: flex; align-items: center; gap: 10px; }
.vo-cast-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; min-width: 240px;
  background: var(--vo-panel); border: 1px solid var(--vo-line); border-radius: 10px; color: var(--vo-muted);
}
.vo-cast-search:focus-within { border-color: var(--vo-accent); }
.vo-cast-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--vo-ink); font: inherit; font-size: 14px; }
.vo-cast-new { display: inline-flex; align-items: center; gap: 8px; height: 38px; }
.vo-cast-recdot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.vo-cast-stopsq { width: 10px; height: 10px; border-radius: 2px; background: currentColor; display: inline-block; margin-right: 6px; }
.vo-cast-error {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px;
  padding: 8px 8px 8px 14px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--vo-danger) 12%, transparent); color: var(--vo-danger);
  border: 1px solid color-mix(in srgb, var(--vo-danger) 35%, transparent);
}
.vo-cast-recorder {
  margin-bottom: 24px; padding: 14px; border-radius: 16px;
  background: var(--vo-panel); border: 1px solid var(--vo-line); box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.vo-cast-recorder[hidden], .vo-cast-stage-wrap[hidden] { display: none; }
.vo-cast-recorder__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vo-cast-recorder__state { flex: 1; min-width: 160px; }
.vo-cast-recorder__actions { display: flex; align-items: center; gap: 8px; }
.vo-cast-toggles { display: flex; gap: 6px; }
.vo-cast-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--vo-line); background: transparent; color: var(--vo-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vo-cast-toggle.on { background: var(--vo-accent-soft); color: var(--vo-accent); border-color: transparent; }
.vo-cast-toggle:disabled { opacity: .55; cursor: default; }
.vo-cast-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #ef4444; }
.vo-cast-live .vo-cast-recdot { animation: vo-cast-pulse 1.2s ease-in-out infinite; box-shadow: none; }
.vo-cast-live.paused { color: var(--vo-muted); }
.vo-cast-live.paused .vo-cast-recdot { animation: none; background: var(--vo-muted); }
@keyframes vo-cast-pulse { 50% { opacity: .3; } }
.vo-cast-recorder .vo-cast-stage-wrap canvas, .vo-cast-recorder .vo-cast-preview { max-height: 56vh; border-radius: 12px; }
.vo-cast-savebar { display: flex; gap: 8px; margin-top: 12px; }
.vo-cast-savebar .vo-input { flex: 1; }
.vo-cast-library h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.vo-cast-count-chip { padding: 1px 8px; border-radius: 999px; background: var(--vo-accent-soft); color: var(--vo-accent); font-size: 12px; }
.vo-cast-library .vo-cast-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vo-cast-library .vo-cast-card { max-width: none; padding: 0; gap: 0; overflow: hidden; border-radius: 14px; transition: box-shadow .15s, border-color .15s; }
.vo-cast-library .vo-cast-card:hover { border-color: var(--vo-accent); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.vo-cast-card__media { position: relative; display: block; }
.vo-cast-library .vo-cast-card img, .vo-cast-library .vo-cast-thumb { border-radius: 0; }
.vo-cast-library .vo-cast-thumb .vo-glyph { width: 28px; height: 28px; opacity: .6; }
.vo-cast-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .15s;
}
.vo-cast-card:hover .vo-cast-play { opacity: 1; }
.vo-cast-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 600; }
.vo-cast-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.vo-cast-card__title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vo-cast-card__title a { flex: 1; min-width: 0; color: var(--vo-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-cast-card__tools { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.vo-cast-card:hover .vo-cast-card__tools, .vo-cast-card:focus-within .vo-cast-card__tools { opacity: 1; }
.vo-cast-card__tools .danger:hover { color: var(--vo-danger); }
.vo-cast-rename { display: flex; gap: 4px; align-items: center; }
.vo-cast-rename .vo-input { flex: 1; min-width: 0; height: 32px; }
.vo-cast-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 0; color: var(--vo-muted); border: 1px dashed var(--vo-line); border-radius: 14px; }
.vo-cast-empty .vo-glyph { width: 28px; height: 28px; }
@media (max-width: 640px) {
  .vo-cast-top__actions { width: 100%; }
  .vo-cast-search { flex: 1; min-width: 0; }
}
.vo-cast-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.6); font-size: 14px; pointer-events: none; }
.vo-cast-idle .vo-glyph { width: 32px; height: 32px; }

/* People picker dialog (new group / add people) */
.vo-people-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(15,23,42,.38); }
.vo-people-pick {
  position: fixed; z-index: 901; left: 50%; top: 12vh; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); max-height: 76vh; display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 16px; background: var(--vo-panel); color: var(--vo-ink);
  border: 1px solid var(--vo-line); box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.vo-people-pick header { display: flex; align-items: center; justify-content: space-between; }
.vo-people-pick h3 { margin: 0; font-size: 16px; }
.vo-people-hint { margin: 0; font-size: 13px; color: var(--vo-muted); }
.vo-people-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vo-people-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--vo-accent-soft); color: var(--vo-accent); font-size: 13px; font-weight: 600;
}
.vo-people-chip button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.vo-people-chip .vo-glyph { width: 12px; height: 12px; }
.vo-people-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--vo-line); border-radius: 10px; color: var(--vo-muted); }
.vo-people-search:focus-within { border-color: var(--vo-accent); }
.vo-people-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--vo-ink); font: inherit; font-size: 14px; }
.vo-people-list { flex: 1; min-height: 120px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.vo-people-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vo-people-list button:hover { background: var(--vo-hover, var(--vo-accent-soft)); }
.vo-people-list button.on { background: var(--vo-accent-soft); }
.vo-people-av { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.vo-people-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vo-people-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-people-main span { font-size: 12px; color: var(--vo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-people-check { flex: 0 0 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; border: 1.5px solid var(--vo-line); color: #fff; }
.vo-people-list button.on .vo-people-check { background: var(--vo-accent); border-color: var(--vo-accent); }
.vo-people-check .vo-glyph { width: 13px; height: 13px; }
.vo-people-empty { padding: 20px 8px; text-align: center; color: var(--vo-muted); font-size: 13px; }
.vo-people-error { margin: 0; font-size: 13px; color: var(--vo-danger); }
.vo-people-pick footer { display: flex; justify-content: flex-end; gap: 8px; }

/* Group conversations in AInbox: people avatar, member stack and menu */
.vo-ain-av.group { background: var(--vo-accent-soft); color: var(--vo-accent); }
.vo-ain-av.group .vo-glyph { width: 15px; height: 15px; }
.vo-ain-members { position: relative; }
.vo-ain-members > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 4px;
  border: 1px solid var(--vo-line); border-radius: 999px; cursor: pointer; color: var(--vo-ink);
}
.vo-ain-members > summary::-webkit-details-marker { display: none; }
.vo-ain-stack { display: inline-flex; }
.vo-ain-stack .vo-ain-av { width: 24px; height: 24px; font-size: 10px; border: 2px solid var(--vo-panel); }
.vo-ain-stack .vo-ain-av + .vo-ain-av { margin-left: -8px; }
.vo-ain-members-count { font-size: 12px; font-weight: 700; }
.vo-ain-members-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 260px; padding: 6px;
  background: var(--vo-panel); border: 1px solid var(--vo-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.vo-ain-members-menu ul { margin: 0 0 4px; padding: 0 0 4px; list-style: none; max-height: 220px; overflow-y: auto; border-bottom: 1px solid var(--vo-line); }
.vo-ain-members-menu li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; }
.vo-ain-members-menu li .vo-ain-av { width: 24px; height: 24px; font-size: 10px; flex: 0 0 24px; }
.vo-ain-members-menu > button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--vo-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.vo-ain-members-menu > button:hover { background: var(--vo-accent-soft); }
.vo-ain-members-menu > button.danger { color: var(--vo-danger); }
.vo-ain-members-rename { display: flex; gap: 4px; padding: 4px; }
.vo-ain-members-rename .vo-input { flex: 1; min-width: 0; height: 32px; }

/* Office chat DMs tab: New group / Add people bar and group marker */
.vo-dm-tools { display: flex; gap: 6px; padding: 6px 2px 8px; }
.vo-dm-tool {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--vo-line); background: transparent; color: var(--vo-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.vo-dm-tool:hover { border-color: var(--vo-accent); color: var(--vo-accent); }
.vo-dm-tool .vo-glyph { width: 14px; height: 14px; }
.vo-dm-groupicon { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--vo-accent); }
.vo-dm-groupicon .vo-glyph { width: 14px; height: 14px; }

/* AInbox sidebar row: "more" button on hover and a proper context menu */
.vo-ain-row { position: relative; }
.vo-ain-row .vo-ain-row-name { flex: 1; }
.vo-ain-more {
  margin-left: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  color: var(--vo-muted); opacity: 0; transition: opacity .12s, background .12s;
}
.vo-ain-row:hover .vo-ain-more, .vo-ain-row:focus-within .vo-ain-more, .vo-ain-more.open { opacity: 1; }
.vo-ain-more:hover, .vo-ain-more.open { background: var(--vo-accent-soft); color: var(--vo-accent); }
.vo-ain-more .vo-glyph { width: 15px; height: 15px; }
.vo-ain-menu {
  position: absolute; right: 6px; top: calc(100% - 2px); z-index: 60; width: 220px; padding: 6px;
  display: flex; flex-direction: column; gap: 1px; cursor: default; text-align: left;
  background: var(--vo-panel); color: var(--vo-ink); border: 1px solid var(--vo-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); font-size: 13px; font-weight: 500;
}
.vo-ain-menu-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.vo-ain-menu-item:hover { background: var(--vo-accent-soft); }
.vo-ain-menu-item .vo-glyph { width: 15px; height: 15px; color: var(--vo-muted); flex: 0 0 15px; }
.vo-ain-menu-item.on { color: var(--vo-accent); font-weight: 600; }
.vo-ain-menu-item.on .vo-glyph { color: var(--vo-accent); }
.vo-ain-menu-sep { height: 1px; margin: 4px 2px; background: var(--vo-line); }
.vo-ain-menu-label { padding: 4px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vo-muted); }
.vo-ain-menu-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 4px; }
.vo-ain-menu-chips span {
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--vo-line); font-size: 12px; font-weight: 600; cursor: pointer;
}
.vo-ain-menu-chips span:hover { border-color: var(--vo-accent); color: var(--vo-accent); }

/* Room card lock icon */
.vo-shell .vo-room__lock { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--vo-warn, #b54708); background: color-mix(in srgb, var(--vo-warn, #f59e0b) 16%, transparent); }

/* Floor area: loading skeleton, empty and error states */
.vo-floor-skeleton { position: relative; display: flex; align-items: stretch; }
.vo-floor-skeleton__grid {
  flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 1fr); gap: 14px; min-height: 360px;
}
.vo-floor-skeleton__tile {
  border-radius: 16px; border: 1px solid var(--vo-line);
  background: linear-gradient(100deg, var(--vo-panel) 30%, color-mix(in srgb, var(--vo-panel) 70%, var(--vo-line)) 50%, var(--vo-panel) 70%);
  background-size: 300% 100%; animation: vo-skeleton 1.4s ease-in-out infinite;
}
.vo-floor-skeleton__tile.wide { grid-column: span 2; }
@keyframes vo-skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vo-floor-skeleton__label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: var(--vo-panel); border: 1px solid var(--vo-line); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: var(--vo-ink); font-size: 14px; font-weight: 600;
}
.vo-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vo-accent-soft); border-top-color: var(--vo-accent); animation: vo-spin .8s linear infinite; }
@keyframes vo-spin { to { transform: rotate(360deg); } }
.vo-floor-state { display: grid; place-items: center; }
.vo-floor-state__card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 380px; padding: 28px 28px 24px; text-align: center;
  background: var(--vo-panel); border: 1px solid var(--vo-line); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.vo-floor-state__card h3 { margin: 4px 0 0; font-size: 17px; color: var(--vo-ink); }
.vo-floor-state__card p { margin: 0 0 8px; font-size: 14px; color: var(--vo-muted); overflow-wrap: anywhere; }
.vo-floor-state__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vo-accent-soft); color: var(--vo-accent); }
.vo-floor-state__icon.danger { background: color-mix(in srgb, var(--vo-danger) 14%, transparent); color: var(--vo-danger); }
@media (prefers-reduced-motion: reduce) { .vo-floor-skeleton__tile, .vo-spinner { animation: none; } }

/* Formatted message text: inline code and links */
.vo-inline-code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--vo-ink) 8%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.vo-msg-link { color: var(--vo-link, var(--vo-accent)); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* One-time prompt to enable desktop notifications */
.vo-shell .vo-notify-prompt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 1.1rem 0; padding: 8px 10px 8px 14px;
  border-radius: 12px; background: var(--vo-accent-soft); color: var(--vo-ink); font-size: 13px;
}
.vo-shell .vo-notify-prompt svg { color: var(--vo-accent); flex: 0 0 16px; }
.vo-shell .vo-notify-prompt span { flex: 1; min-width: 200px; }
.vo-shell .vo-notify-prompt .vo-btn { height: 30px; padding: 0 12px; font-size: 13px; }

/* AInbox composer hosts the @ picker */
.vo-ain-box { position: relative; }

/* Huddle button: green while a huddle is live */
.vo-dm-tool.live { border-color: var(--vo-ok, #16a34a); color: var(--vo-ok, #16a34a); background: color-mix(in srgb, var(--vo-ok, #16a34a) 10%, transparent); }
.vo-dm-tool:disabled { opacity: .6; cursor: default; }

/* Profile photos sit on top of the initials avatar */
.vo-avatar, .vo-ain-av { position: relative; }
.vo-av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* Account page */
.vo-account { max-width: 720px; padding: 1.25rem 1.5rem 2.5rem; }
.vo-account h1 { margin: 0 0 16px; font-size: 24px; }
.vo-account-card { margin-bottom: 16px; padding: 18px 20px; border-radius: 16px; background: var(--vo-panel); border: 1px solid var(--vo-line); }
.vo-account-photo { display: flex; gap: 18px; align-items: flex-start; }
.vo-account-photo h2 { margin: 2px 0 4px; font-size: 16px; }
.vo-account-av {
  position: relative; flex: 0 0 5.25rem; width: 5.25rem; height: 5.25rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 26px; font-weight: 700; background: linear-gradient(140deg, var(--vo-accent), #8b5cf6);
}
.vo-account-sub { margin: 0 0 12px; color: var(--vo-muted); font-size: 13px; }
.vo-account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vo-account-actions label.vo-btn { position: relative; overflow: hidden; cursor: pointer; }
.vo-account-actions label.vo-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vo-account-msg { margin: 10px 0 0; font-size: 13px; color: var(--vo-ok, #16a34a); }
.vo-account-msg.error { color: var(--vo-danger); }
.vo-account-facts { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.vo-account-facts dt { color: var(--vo-muted); }
.vo-account-facts dd { margin: 0; color: var(--vo-ink); }

/* Poll card in chat */
.vo-poll { max-width: 420px; margin: 4px 0; padding: 12px; border-radius: 14px; background: var(--vo-panel); border: 1px solid var(--vo-line); }
.vo-poll__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; color: var(--vo-ink); }
.vo-poll__head strong { font-size: 14px; line-height: 1.35; }
.vo-poll__icon { flex: 0 0 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--vo-accent-soft); color: var(--vo-accent); }
.vo-poll__options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vo-poll__option {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; overflow: hidden;
  border: 1px solid var(--vo-line); border-radius: 10px; background: transparent; color: var(--vo-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.vo-poll__option:hover { border-color: var(--vo-accent); }
.vo-poll__option.mine { border-color: var(--vo-accent); }
.vo-poll__bar { position: absolute; inset: 0 auto 0 0; background: var(--vo-accent-soft); transition: width .25s ease; z-index: 0; }
.vo-poll__check, .vo-poll__text, .vo-poll__count { position: relative; z-index: 1; }
.vo-poll__check { flex: 0 0 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--vo-line); color: #fff; }
.vo-poll__option.mine .vo-poll__check { background: var(--vo-accent); border-color: var(--vo-accent); }
.vo-poll__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vo-poll__count { font-weight: 700; color: var(--vo-muted); }
.vo-poll__meta { margin: 8px 0 0; font-size: 12px; color: var(--vo-muted); }

/* =====================================================================
   Phones (<= 760px): one pane at a time with a bottom tab bar, a two-row
   icon header, and no duplicated dock shortcuts.
   ===================================================================== */
.vo-mobile-nav { display: none; }

@media (max-width: 760px) {
  .vo-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
    max-height: 100dvh;
  }

  .vo-shell.m-office .vo-chat-column { display: none; }
  .vo-shell.m-chat .vo-map-pane { display: none; }
  .vo-shell.m-chat.chat-closed .vo-chat-column { display: flex; }
  .vo-shell .vo-chat-column { grid-row: 1; min-height: 0; display: flex; flex-direction: column; }
  .vo-shell .vo-chat-column > .vo-chat-pane { flex: 1; }
  .vo-shell .vo-chat-collapse,
  .vo-shell [data-chat-reopen] { display: none; }
  .vo-shell .vo-chat-pane { border-left: 0; }
  .vo-shell .vo-chat-list { max-height: 38%; min-height: 96px; }

  .vo-mobile-nav {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--vo-bg-elev);
    border-top: 1px solid var(--vo-line);
    z-index: 20;
  }
  .vo-mobile-nav > a,
  .vo-mobile-nav > button {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; border: 0; border-radius: 10px; background: transparent;
    color: var(--vo-muted); font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer;
  }
  .vo-mobile-nav > .active { color: var(--vo-accent); background: var(--vo-accent-soft); }
  .vo-mobile-nav__badge {
    position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--vo-danger, #ef4444); color: #fff; font-size: 10px; line-height: 18px; text-align: center;
  }

  /* Header: brand row, then a sideways-scrolling row of icon buttons. */
  .vo-shell .vo-office-bar {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; height: auto; min-height: 0;
  }
  .vo-shell .vo-office-bar__left,
  .vo-shell .vo-office-bar__right {
    width: 100%; min-width: 0; flex-wrap: nowrap; gap: 6px;
  }
  .vo-shell .vo-office-bar__right {
    overflow-x: auto; scrollbar-width: none; justify-content: flex-start; padding-bottom: 2px;
  }
  .vo-shell .vo-office-bar__right::-webkit-scrollbar { display: none; }
  .vo-shell .vo-office-bar__company { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--vo-ink); }
  .vo-shell .vo-office-bar__sep { display: none; }
  .vo-shell .vo-office-bar .vo-bar-label { display: none; }
  .vo-shell .vo-office-bar .vo-btn,
  .vo-shell .vo-office-bar .vo-theme-btn { flex: 0 0 auto; min-width: 38px; height: 38px; padding: 0 10px; justify-content: center; }
  .vo-shell .vo-reception { flex: 0 0 auto; }
  .vo-shell .vo-reception input { display: none; }

  .vo-shell .vo-office-strip { padding: 6px 10px 0; }
  .vo-shell .vo-notify-prompt { margin: 8px 10px 0; }

  /* Floor: two room columns, dock shows only the call controls. */
  .vo-shell .vo-floor-frame { padding: 10px; }
  .vo-shell .vo-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vo-shell .vo-floor-skeleton__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 280px; }
  .vo-shell .vo-floor-skeleton__tile.wide { grid-column: span 2; }
  .vo-shell .vo-dock__right { display: none; }
  .vo-shell .vo-dock { margin: 0 auto 6px; }
  .vo-shell .vo-floor-tabs { padding: 0 10px; overflow-x: auto; flex-wrap: nowrap; }

  /* Popups and dialogs fit the screen. */
  .vo-shell .vo-pop,
  .vo-shell .vo-pop[data-anchored] { left: 8px !important; right: 8px !important; width: auto !important; max-width: none; }
  .vo-people-pick { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 88dvh; border-radius: 18px 18px 0 0; }
  .vo-mention-pick { left: 4px; right: 4px; }
}

@media (max-width: 380px) {
  .vo-shell .vo-floor { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Shorter empty rooms; 16px text in fields so iOS doesn't zoom on focus. */
  .vo-shell .vo-room { min-height: 5.25rem; }
  .vo-shell textarea,
  .vo-shell input:not([type=checkbox]):not([type=radio]),
  .vo-shell select,
  .vo-ain-app textarea,
  .vo-ain-app input:not([type=checkbox]):not([type=radio]),
  .vo-people-pick input { font-size: 16px; }
}

/* AInbox on phones: list overlay with a back arrow, wrapping header */
.vo-ain-back-mobile { display: none; }
@media (max-width: 860px) {
  .vo-ain { position: relative; }
  .vo-ain.with-side .vo-ain-side { width: auto; border-right: 0; overflow-y: auto; background: var(--vo-bg-elev); z-index: 40; }
  .vo-ain-back-mobile { display: inline-grid; flex: 0 0 auto; }
  .vo-ain-head { flex-wrap: wrap; gap: 8px; align-items: center; padding-left: 10px; padding-right: 10px; }
  .vo-ain-head > div:first-of-type { flex: 1 1 180px; min-width: 0; }
  .vo-ain-head > .vo-ain-quick { flex: 1 1 100%; }
  .vo-ain-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
  .vo-ain-head .vo-ain-quick { flex-wrap: wrap; justify-content: flex-start; }
  .vo-ain-members-menu { right: auto; left: 0; max-width: calc(100vw - 70px); }
  .vo-ain-tabs { overflow-x: auto; }
  .vo-ain-threads, .vo-ain-log { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 760px) {
  .vo-mobile-nav { grid-template-columns: repeat(5, 1fr); }
  .vo-mobile-more {
    position: fixed; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 60; min-width: 200px;
    display: flex; flex-direction: column; padding: 6px; border-radius: 14px;
    background: var(--vo-panel); border: 1px solid var(--vo-line); box-shadow: 0 16px 40px rgba(0,0,0,.2);
  }
  .vo-mobile-more > a, .vo-mobile-more > button {
    display: block; padding: 12px 14px; border: 0; border-radius: 9px; background: transparent;
    color: var(--vo-ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
  }
  .vo-mobile-more > a:hover, .vo-mobile-more > button:hover { background: var(--vo-accent-soft); }
}
.vo-mobile-more { display: none; }
@media (max-width: 760px) { .vo-shell .vo-mobile-more, .vo-mobile-more { display: flex; } }

/* Quiet note under the chat box: the person or room you're writing to is locked. */
.vo-compose-note {
  display: flex; align-items: center; gap: 5px; margin: 0 0 4px 2px;
  font-size: 11px; line-height: 1.3; color: var(--vo-muted); opacity: .85;
}
.vo-compose-note svg { flex: 0 0 11px; }
.vo-compose-note--pop { margin: 0 12px 4px; }

/* ── Activity bell (every page) ─────────────────────────────────────────── */
.vo-bell { position: relative; display: inline-flex; }
.vo-bell__btn {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--vo-line); border-radius: 9px; background: var(--vo-panel); color: var(--vo-ink); cursor: pointer;
}
.vo-bell__btn:hover { background: var(--vo-hover); }
.vo-bell__btn:focus-visible { outline: 2px solid var(--vo-focus); outline-offset: 2px; }
.vo-bell__btn .vo-glyph { width: 17px; height: 17px; }
.vo-bell__badge {
  position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--vo-danger, #ef4444); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--vo-panel);
}
.vo-bell__scrim { position: fixed; inset: 0; z-index: 1190; }
.vo-bell__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; width: 380px; max-height: min(560px, calc(100vh - 90px));
  display: flex; flex-direction: column; background: var(--vo-panel); color: var(--vo-ink);
  border: 1px solid var(--vo-line); border-radius: 14px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22); overflow: hidden;
}
.vo-bell__panel:focus { outline: none; }
.vo-bell__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 16px; }
.vo-bell__head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.vo-bell__tools { display: flex; gap: 2px; }
.vo-bell__tool {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--vo-muted); cursor: pointer; text-decoration: none;
}
.vo-bell__tool:hover, .vo-bell__tool.active { background: var(--vo-hover); color: var(--vo-ink); }
.vo-bell__tool:disabled { opacity: 0.4; cursor: default; background: transparent; }
.vo-bell__pause {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 12px 8px; padding: 8px 10px;
  border: 1px solid var(--vo-line); border-radius: 10px; background: var(--vo-bg); font-size: 12.5px;
}
.vo-bell__pause span { width: 100%; color: var(--vo-muted); }
.vo-bell__pause button, .vo-bell__paused button {
  border: 1px solid var(--vo-line); border-radius: 999px; padding: 3px 10px; background: var(--vo-panel);
  color: var(--vo-ink); font-size: 12px; cursor: pointer;
}
.vo-bell__pause button:hover, .vo-bell__paused button:hover { border-color: var(--vo-accent); color: var(--vo-accent); }
.vo-bell__paused {
  display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 7px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--vo-warn) 14%, transparent); font-size: 12.5px;
}
.vo-bell__paused span { flex: 1; }
.vo-bell__filters { margin: 0 12px 6px; align-self: flex-start; }
.vo-bell__list { flex: 1; overflow-y: auto; padding: 2px 6px 6px; }
.vo-bell__item {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: start; gap: 10px; width: 100%;
  padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.vo-bell__item:hover { background: var(--vo-hover); }
.vo-bell__item.unread { background: color-mix(in srgb, var(--vo-accent) 7%, transparent); }
.vo-bell__item.unread:hover { background: color-mix(in srgb, var(--vo-accent) 12%, transparent); }
.vo-bell__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.vo-bell__icon--accent { background: color-mix(in srgb, var(--vo-accent) 15%, transparent); color: var(--vo-accent); }
.vo-bell__icon--warm { background: color-mix(in srgb, var(--vo-warn) 16%, transparent); color: var(--vo-warn); }
.vo-bell__icon--warn { background: color-mix(in srgb, var(--vo-danger) 13%, transparent); color: var(--vo-danger); }
.vo-bell__icon--good { background: color-mix(in srgb, var(--vo-ok) 15%, transparent); color: var(--vo-ok); }
.vo-bell__icon--muted { background: var(--vo-hover); color: var(--vo-muted); }
.vo-bell__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-bell__text strong { font-size: 13px; font-weight: 600; line-height: 1.35; }
.vo-bell__item:not(.unread) .vo-bell__text strong { font-weight: 500; }
.vo-bell__detail {
  font-size: 12.5px; color: var(--vo-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vo-bell__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
.vo-bell__meta time { font-size: 11.5px; color: var(--vo-muted); white-space: nowrap; }
.vo-bell__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vo-accent); }
.vo-bell__empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 24px; margin: 0;
  color: var(--vo-muted); text-align: center; font-size: 12.5px;
}
.vo-bell__empty .vo-glyph { width: 26px; height: 26px; opacity: 0.6; }
.vo-bell__empty strong { color: var(--vo-ink); font-size: 14px; }
.vo-bell__foot { padding: 8px 16px 10px; border-top: 1px solid var(--vo-line); font-size: 12.5px; }
.vo-bell__foot a { color: var(--vo-link); text-decoration: none; }
.vo-bell__foot a:hover { text-decoration: underline; }
/* In the office bar the bell matches the other bar buttons. */
.vo-office-bar .vo-bell__btn { height: 32px; width: 32px; }

@media (max-width: 760px) {
  .vo-bell__panel {
    position: fixed; top: 56px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 140px);
  }
}

/* ── Notification settings (Account page) ───────────────────────────────── */
.vo-notify-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 12px 0; }
.vo-notify-toggle {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--vo-line);
  border-radius: 10px; background: var(--vo-panel); cursor: pointer;
}
.vo-notify-toggle:hover { border-color: color-mix(in srgb, var(--vo-accent) 45%, var(--vo-line)); }
.vo-notify-toggle input { margin-top: 3px; accent-color: var(--vo-accent); width: 16px; height: 16px; }
.vo-notify-toggle span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.vo-notify-toggle small { color: var(--vo-muted); font-size: 12px; }
.vo-notify-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.vo-notify-state { font-size: 12.5px; color: var(--vo-muted); }
.vo-notify-state.ok { color: var(--vo-ok); }
.vo-notify-state.bad { color: var(--vo-danger); }

/* DM person actions (wave, knock, invite, guest badge) live in the conversation header,
   grouped and set apart from the conversation tools by a thin divider. */
.vo-ain-person-actions {
  display: inline-flex; align-items: center; gap: 2px;
  padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--vo-line);
}
@media (max-width: 760px) {
  .vo-ain-head .vo-ain-quick { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .vo-ain-person-actions .vo-ain-iconbtn { width: 30px; height: 30px; }
}
.vo-ain-head .vo-ain-person-actions .vo-ain-iconbtn { border-color: transparent; background: transparent; border-radius: 9px; }
.vo-ain-head .vo-ain-person-actions .vo-ain-iconbtn:hover { background: var(--vo-hover); }

/* Phones: chat gets the whole screen. A call keeps running while you chat; its window
   and buttons step aside (no overlap) and the Office tab shows a green dot to go back. */
@media (max-width: 760px) {
  body:has(.vo-shell.m-chat) .vo-call-overlay { display: none; }
  .vo-shell .vo-pop,
  .vo-shell .vo-pop[data-anchored] { z-index: 30; }
  .vo-mobile-nav__live {
    position: absolute; top: 7px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 2px var(--vo-bg-elev);
  }
}

/* Phones: the bottom dock only held desktop shortcuts (hidden there), so drop it. */
@media (max-width: 760px) {
  .vo-shell .vo-dock { display: none; }
}

/* ---------- Incoming knock / meeting call card ---------- */
.vo-toast.vo-ring {
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  animation: vo-ring-in 200ms ease;
}
@keyframes vo-ring-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.vo-ring__top { display: flex; align-items: center; gap: 12px; }
.vo-ring__avatar {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--vo-accent-soft); color: var(--vo-accent); font-weight: 700; font-size: 16px;
}
.vo-ring__avatar .vo-glyph { width: 22px; height: 22px; }
.vo-ring:not(.vo-ring--out) .vo-ring__avatar::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--vo-accent); opacity: 0;
  animation: vo-ring-pulse 1.6s ease-out infinite;
}
@keyframes vo-ring-pulse {
  0% { opacity: 0.7; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.25); }
}
.vo-ring__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vo-ring__who strong { font-size: 16px; color: var(--vo-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-ring__who > span:last-child { color: var(--vo-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.vo-ring__kicker {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vo-accent);
}
.vo-ring__kicker .vo-glyph { width: 12px; height: 12px; }
.vo-ring__time {
  flex: 0 0 auto; align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  background: var(--vo-bg-elev, rgba(0,0,0,.05)); color: var(--vo-muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.vo-toast .vo-ring__note { margin: 10px 0 0; font-size: 13px; }
.vo-ring__bar { height: 3px; margin: 12px 0 10px; border-radius: 3px; background: var(--vo-line); overflow: hidden; }
.vo-ring__bar > span { display: block; height: 100%; background: var(--vo-accent); transition: width 0.5s linear; }
.vo-ring--out .vo-ring__bar { margin-bottom: 0; }
.vo-ring__link {
  border: 0; background: none; padding: 0; margin: 0 0 10px; cursor: pointer;
  color: var(--vo-link, var(--vo-accent)); font: inherit; font-size: 13px;
}
.vo-ring__input { width: 100%; margin: 0 0 10px; }
.vo-ring__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vo-ring__actions > :only-child { grid-column: 1 / -1; }
.vo-ring__btn {
  min-height: 42px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px;
}
.vo-ring__btn.accept { background: #16a34a; color: #fff; }
.vo-ring__btn.accept:hover { background: #15803d; }
.vo-ring__btn.decline { background: transparent; color: var(--vo-ink); border-color: var(--vo-line); }
.vo-ring__btn.decline:hover { background: var(--vo-bg-elev, rgba(0,0,0,.05)); }

/* Phones: the stack sits at the bottom, above the tab bar, full width. */
@media (max-width: 760px) {
  .vo-toast-stack {
    top: auto; left: 8px; right: 8px; width: auto;
    bottom: calc(68px + env(safe-area-inset-bottom));
  }
  .vo-ring__btn { min-height: 48px; font-size: 15px; }
}

/* "Tap to turn on sound" (phones block call audio until a tap). */
.vo-sound-unlock {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 70;
  padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: #16a34a; color: #fff; font: 600 14px/1.2 system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* ---------- Office chat popup: bubbles, grouped messages, photos ---------- */
.vo-pop .vo-pop-log { gap: 2px; padding: 12px 14px; }
.vo-pop .vo-avatar { position: relative; }
.vo-pop .vo-pop-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.vo-pop .vo-pop-day .vo-pop-today {
  position: static; margin: 0; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--vo-line); background: var(--vo-bg-elev); color: var(--vo-muted);
  font-size: 11px; font-weight: 600;
}
.vo-pop .vo-pop-msg {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px; align-items: end; margin-top: 8px;
}
.vo-pop .vo-pop-msg.grouped { margin-top: 0; }
.vo-pop .vo-pop-msg > .vo-avatar { width: 28px; height: 28px; font-size: 10px; align-self: start; }
.vo-pop .vo-pop-msg.grouped > .vo-avatar { visibility: hidden; height: 0; }
.vo-pop .vo-pop-msg.grouped .vo-pop-meta { display: none; }
.vo-pop .vo-pop-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.vo-pop .vo-pop-meta { margin: 0 0 3px 2px; gap: 6px; }
.vo-pop .vo-pop-meta strong { font-size: 12px; font-weight: 700; }
.vo-pop .vo-pop-meta > span:last-child { font-size: 11px; }
.vo-pop .vo-pop-text {
  max-width: 100%; padding: 7px 11px; border-radius: 4px 14px 14px 14px;
  background: var(--vo-bg-elev, #f1f5f9); color: var(--vo-ink);
  font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
}
.vo-pop .vo-pop-msg.grouped .vo-pop-text { border-radius: 14px; }
/* Your own messages: right side, accent bubble, no photo. */
.vo-pop .vo-pop-msg.mine { grid-template-columns: minmax(0, 1fr); }
.vo-pop .vo-pop-msg.mine > .vo-avatar { display: none; }
.vo-pop .vo-pop-msg.mine .vo-pop-body { align-items: flex-end; }
.vo-pop .vo-pop-msg.mine .vo-pop-meta strong { display: none; }
.vo-pop .vo-pop-msg.mine .vo-pop-text {
  background: var(--vo-accent); color: #fff; border-radius: 14px 4px 14px 14px;
}
.vo-pop .vo-pop-msg.mine.grouped .vo-pop-text { border-radius: 14px; }
.vo-pop .vo-pop-msg .vo-msg-more { top: 2px; }
.vo-pop .vo-pop-msg.mine .vo-msg-more { right: auto; left: 0; }
.vo-pop .vo-pop-react { margin-top: 3px; }
.vo-pop .vo-empty { margin: auto; text-align: center; color: var(--vo-muted); font-size: 13px; }
/* A small popup doesn't need the formatting toolbar; Enter sends, Shift+Enter adds a line. */
.vo-pop .vo-pop-fmt { display: none; }
.vo-pop .vo-pop-compose { padding-top: 8px; }
.vo-pop .vo-pop-who .vo-avatar { width: 36px; height: 36px; }
.vo-pop .vo-pop-who__text span { font-size: 12px; }
/* Status dot only on the person in the header; message photos stay clean. */
.vo-shell .vo-pop .vo-pop-msg .vo-avatar::after { display: none; }
.vo-shell .vo-pop .vo-avatar--offline::after { background: #94a3b8; }
.vo-shell .vo-pop .vo-pop-who .vo-avatar--away { filter: none; opacity: 1; }
.vo-pop .vo-pop-chip[data-chat] { display: none; }

/* ---------- Call as a compact box at the bottom right ---------- */
.vo-call-meta { color: var(--vo-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vo-call-size {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--vo-line); border-radius: 9px; background: transparent; color: var(--vo-ink); cursor: pointer;
}
.vo-call-size:hover { background: var(--vo-bg-elev); }
.vo-call-size svg { width: 16px; height: 16px; }

.vo-call-overlay[data-compact="true"] {
  top: auto; left: auto; right: 16px; bottom: 16px;
  width: 380px; max-width: calc(100vw - 32px); height: auto; min-height: 0;
  padding: 12px; gap: 10px; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}
.vo-call-overlay[data-compact="true"] .vo-call-head { flex-wrap: nowrap; gap: 8px; }
.vo-call-overlay[data-compact="true"] .vo-call-title { flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 0; }
.vo-call-overlay[data-compact="true"] .vo-call-title strong { display: none; }
.vo-call-overlay[data-compact="true"] .vo-call-room {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; color: var(--vo-ink); font-size: 14px;
}
.vo-call-overlay[data-compact="true"] .vo-call-meta { flex-basis: 100%; padding-left: 16px; }
.vo-call-overlay[data-compact="true"] .vo-call-views,
.vo-call-overlay[data-compact="true"] .vo-call-side,
.vo-call-overlay[data-compact="true"] .vo-call-optional { display: none; }
/* Audio: no stage at all. Video: a small preview strip. */
.vo-call-overlay[data-compact="true"] .vo-call-body { display: block; min-height: 0; flex: 0 0 auto; }
.vo-call-overlay[data-compact="true"][data-call="audio"] .vo-call-body { display: none; }
.vo-call-overlay[data-compact="true"][data-call="video"] .vo-call-stage { height: 170px; min-height: 0; }
.vo-call-overlay[data-compact="true"] .vo-call-actions { padding: 0; justify-content: space-between; gap: 8px; }
.vo-call-overlay[data-compact="true"] .vo-call-menu { bottom: calc(100% + 6px); top: auto; }

@media (max-width: 760px) {
  .vo-call-overlay[data-compact="true"] {
    right: 8px; left: 8px; width: auto; max-width: none;
    bottom: calc(68px + env(safe-area-inset-bottom));
  }
}

/* ---------- Phones: feel instant ---------- */
/* No 300ms double-tap-zoom wait before a tap counts, and no grey tap flash. */
html, body, button, a, [role="button"], .vo-room, .vo-chat-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none) and (pointer: coarse) {
  /* Immediate press feedback, so a tap visibly lands even while data is loading. */
  button:active, a:active, .vo-room:active, .vo-chat-item:active, .vo-mobile-nav > *:active {
    transform: scale(0.97); filter: brightness(0.94); transition: transform 60ms ease, filter 60ms ease;
  }
  /* Blur effects and entrance animations are slow to draw on phones. */
  .vo-shell .vo-dock, .vo-shell [class*="glass"] { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .vo-pop, .vo-toast.vo-ring { animation-duration: 120ms; }
  /* Comfortable tap targets. */
  .vo-dm-tool, .vo-chat-tabs button { min-height: 40px; }
  .vo-chat-item { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width: 760px) {
  /* Chat screen: list takes less room, conversation gets more; smooth momentum scrolling. */
  .vo-shell .vo-chat-list { max-height: 34%; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .vo-shell .vo-chat-log, .vo-shell .vo-chat-messages { overscroll-behavior: contain; }
  .vo-shell .vo-dm-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px 8px; }
  .vo-shell .vo-dm-tools::-webkit-scrollbar { display: none; }
  .vo-shell .vo-dm-tool { flex: 0 0 auto; white-space: nowrap; }
  .vo-dm-bar { padding: 8px 12px; border-bottom: 1px solid var(--vo-line); font-size: 15px; }
  .vo-ring__close {
    flex: 0 0 auto; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 8px;
    background: transparent; color: var(--vo-muted); cursor: pointer;
  }
}
.vo-ring__close {
  flex: 0 0 auto; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--vo-muted); cursor: pointer; font-size: 13px;
}
.vo-ring__close:hover { background: var(--vo-bg-elev); color: var(--vo-ink); }
@media (max-width: 760px) {
  /* Header: theme, lobby and exit live in the More menu on phones; the status picker
     takes the room so the row no longer runs off the edge. */
  .vo-shell .vo-office-bar__right > [title="Theme"],
  .vo-shell .vo-office-bar__right > [title="Lobby"],
  .vo-shell .vo-office-bar__right > [title="Exit"] { display: none !important; }
  .vo-shell .vo-office-bar__right { overflow: visible; }
  .vo-shell .vo-reception { flex: 1 1 auto; min-width: 0; }
  .vo-shell .vo-reception select { min-width: 0; width: 100%; text-overflow: ellipsis; }
  /* Room names: two lines instead of "DemoTwo's Offi…". */
  .vo-shell .vo-room__label { padding-right: 1.6rem; }
  .vo-shell .vo-room__name {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.25; font-size: 0.86rem;
  }
}