/* Shared interaction system: compact desktop, 44px touch targets, contextual surfaces. */
:root {
  --control:36px;
  --radius:12px;
  --line:#dce1e466;
  --muted:#768186;
  --surface:#ffffffc7;
  --ink:#33434b;
  --accent:#e2ebee;
  --panel:330px
}
button {
  min-height:var(--control);
  padding:8px 12px;
  border-radius:var(--radius);
  line-height:1.35
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid #7694a3;
  outline-offset:2px
}
button:disabled {
  cursor:not-allowed;
  opacity:.42
}
button[data-busy] {
  cursor:progress
}
svg {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle
}
.icon {
  width:36px;
  height:36px;
  min-height:36px;
  border-radius:10px
}
.icon:hover {
  background:#dfe7ea80
}
input,select,textarea {
  padding:10px 12px;
  border-radius:11px;
  min-height:38px;
  font-size:14px
}
input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid #8fa8b2;
  outline-offset:1px
}
h1 {
  font-size:22px;
  letter-spacing:-.5px
}
h2 {
  font-size:19px
}
h3 {
  font-size:14px
}
.actions {
  gap:8px;
  margin-top:12px;
  align-items:center
}
.actions>* {
  flex:0 1 auto;
  min-width:0
}
.actions .primary {
  margin-left:auto
}
.stack {
  gap:7px
}
.card,.glass {
  border-radius:18px;
  box-shadow:0 4px 16px #25303b05
}
.card {
  padding:14px;
  margin-bottom:12px
}
.muted,small {
  color:var(--muted)
}
.app-shell {
  max-width:1360px;
  width:calc(100% - 40px);
  height:calc(100dvh - 40px);
  min-height:0;
  margin:20px auto;
  grid-template-columns:300px minmax(0,1fr);
  border-radius:24px
}
.sidebar {
  padding:18px 12px 12px
}
.brand {
  font-size:18px;
  margin:0 10px 20px
}
.brand small {
  font-size:9px;
  letter-spacing:.4px
}
.sidebar-content {
  scrollbar-gutter:stable;
  overscroll-behavior:contain
}
.section-head {
  margin:0 2px 12px;
  gap:6px
}
.segmented button {
  padding:8px 12px
}
.bottom-nav {
  border-radius:19px;
  padding:4px;
  margin-top:10px
}
.bottom-nav button {
  min-height:52px;
  padding:5px;
  font-size:11px
}
.bottom-nav button span {
  font-size:0;
  margin-bottom:4px
}
.bottom-nav button.active {
  border-radius:15px
}
.listrow {
  gap:10px;
  padding:11px 10px;
  min-height:64px;
  border-radius:13px
}
.listrow+.listrow {
  border-top:0
}
.listrow.current {
  background:#dde6eaa6;
  box-shadow:inset 3px 0 #2f9b83
}
.listrow strong {
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.listrow p {
  font-size:12px;
  margin-top:5px
}
.listrow .avatar {
  width:42px;
  height:42px;
  border-radius:14px
}
.listrow svg {
  width:15px;
  color:#8a969c
}
.listrow time {
  font-size:10px
}
.chip {
  font-size:10px;
  padding:3px 6px
}
.badge {
  min-width:18px;
  text-align:center
}
.contacts-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 6px 2px
}
#search-chats,#search-contacts {
  background:#e9edef88;
  border-color:transparent;
  margin-bottom:7px;
  min-height:36px
}
.empty {
  padding:30px 12px;
  font-size:13px;
  line-height:1.8
}
.workspace {
  padding:14px 20px 14px;
  min-width:0
}
.workspace>header {
  padding:8px 0 12px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  border-bottom:1px solid var(--line);
  min-height:60px;
  gap:12px;
  margin-bottom:10px
}
.workspace header strong {
  font-size:17px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0
}
.workspace header small {
  font-size:10px;
  line-height:1.5;
  color:#7e8a90
}
.workspace header>[data-action=back] {
  display:none
}
.header-actions {
  display:flex;
  align-items:center;
  gap:3px
}
.activity-entry {
  display:flex;
  gap:5px;
  align-items:center;
  background:#e7edefaa;
  border-color:transparent;
  min-height:34px;
  padding:6px 9px;
  font-size:12px
}
.activity-entry svg {
  width:17px
}
.chat-body {
  gap:8px
}
.message-area {
  min-height:100px
}
.message-scroll {
  padding:16px 6px;
  overscroll-behavior:contain
}
.messages {
  gap:18px
}
.bubblewrap {
  max-width:min(76%,560px)
}
.bubble {
  border:0;
  border-radius:4px 15px 15px;
  padding:9px 12px;
  background:#ffffffe0;
  line-height:1.65;
  box-shadow:0 2px 7px #25334304
}
.mine .bubble {
  border-radius:15px 4px 15px 15px;
  background:#dce6ea99
}
.msgmeta {
  font-size:10px;
  color:#859198;
  gap:6px;
  min-height:22px
}
.msgmenu {
  min-height:24px;
  min-width:28px;
  opacity:.4
}
.message:hover .msgmenu,.msgmenu:focus-visible {
  opacity:1;
  background:#dce4e8
}
.bubble img,.bubble video {
  max-width:100%
}
.bubble audio {
  max-width:min(240px,100%)
}
.composer {
  padding:6px 8px;
  gap:3px;
  margin-top:9px;
  border-radius:18px;
  background:#ffffffbd;
  box-shadow:0 3px 16px #33444e05;
  align-items:flex-end;
  flex-shrink:0
}
.composer textarea {
  resize:none;
  min-height:38px;
  max-height:120px;
  height:38px;
  flex:1;
  width:0;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  padding:9px 7px;
  line-height:20px;
  box-shadow:none;
  scrollbar-width:thin
}
.composer .icon {
  width:36px;
  height:38px;
  min-height:38px
}
.composer .send-button {
  background:#2f9b83;
  color:white;
  border-radius:12px
}
.composer .send-button:disabled {
  background:#dce2e5;
  color:#809098;
  opacity:.65
}
.replybar {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-left:3px solid #8da3ad;
  margin-top:8px;
  background:#ffffff70;
  border-radius:8px
}
.replybar span {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.newmsgs {
  bottom:12px;
  min-height:34px
}
.offlinenote {
  flex-shrink:0;
  line-height:1.5
}
.action-group {
  margin:0 0 17px
}
.action-group>h3 {
  font-size:11px;
  color:#819097;
  font-weight:500;
  margin:0 8px 7px;
  letter-spacing:.5px
}
.action-group>h3:empty {
  display:none
}
.row-list {
  border:1px solid #ffffffaa;
  background:#ffffff70;
  border-radius:14px;
  overflow:hidden
}
.navrow {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  min-height:43px;
  padding:10px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:13px
}
.navrow+.navrow {
  border-top:1px solid #dbe2e54d
}
.navrow>span {
  flex:1;
  min-width:0
}
.navrow small {
  font-size:11px
}
.navrow svg {
  width:14px;
  height:14px;
  color:#8b999f
}
.page-title {
  justify-content:flex-start;
  gap:8px;
  margin-bottom:20px
}
.page-title h1 {
  font-size:21px
}
.profile {
  padding:18px;
  background:#ffffff75
}
.profile-entry{display:block;width:100%;text-align:left}
.profile-name{display:block;font-size:21px;font-weight:600;margin-bottom:4px;overflow-wrap:anywhere}
.profile-entry small{display:block;overflow-wrap:anywhere}
.profile-chevron{flex-shrink:0;font-size:26px;line-height:1;color:#8b9ba2}
.profile-bio{display:block;margin-top:15px;overflow-wrap:anywhere}
.profile-entry:focus-visible{outline:2px solid #2f9b83;outline-offset:3px}
.feature-hero {
  padding:16px;
  border-radius:18px;
  margin-bottom:13px
}
.feature-hero h2 {
  font-size:19px;
  line-height:1.4;
  margin-bottom:7px
}
.feature-hero p {
  font-size:12px;
  margin-bottom:12px
}
.features {
  gap:10px
}
.feature {
  border-radius:17px;
  min-height:105px;
  aspect-ratio:1.3
}
.feature-copy {
  left:11px;
  bottom:12px
}
.feature-copy strong {
  font-size:14px
}
.feature-copy small {
  font-size:10px
}
.room-summary {
  padding:3px 2px 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px
}
.room-summary h2 {
  margin-bottom:7px;
  font-size:19px;
  overflow-wrap:anywhere
}
.room-summary p {
  font-size:12px;
  line-height:1.7;
  color:#7c878c;
  margin:12px 0 0
}
.advanced {
  margin-top:10px;
  font-size:12px
}
.advanced summary {
  cursor:pointer;
  min-height:36px;
  display:flex;
  align-items:center;
  color:#72858e;
  list-style:none
}
.advanced summary:after {
  content:'⌄';
  margin-left:auto
}
.advanced[open] summary:after {
  content:'⌃'
}
/* Nonmodal details reserve desktop space, rather than blocking the chat. */
#sheet {
  position:fixed;
  z-index:20;
  inset:auto;
  margin:0;
  border:1px solid #fff;
  background:#f7f9faed;
  border-radius:18px;
  padding:0;
  color:#33434b;
  box-shadow:0 12px 45px #283d4a1a;
  max-height:calc(var(--app-height,100dvh) - 40px);
  overflow:hidden;
  backdrop-filter:blur(26px)
}
#sheet[open] {
  display:flex;
  flex-direction:column
}
#sheet[data-kind=detail] {
  width:var(--panel);
  right:max(20px,calc((100vw - 1360px)/2));
  top:20px;
  bottom:20px;
  height:calc(var(--app-height,100dvh) - 40px);
  max-height:calc(var(--app-height,100dvh) - 40px);
  border-radius:0 24px 24px 0;
  border-left:1px solid #dce3e7
}
body.detail-open .app-shell {
  grid-template-columns:280px minmax(0,1fr) var(--panel)
}
.sheet-head {
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 14px;
  margin:0;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  min-height:58px
}
.sheet-head h2 {
  font-size:16px;
  flex:1;
  margin:0;
  outline:none
}
.surface-body {
  padding:16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0
}
.surface-body .stack>button {
  min-height:36px;
  text-align:left
}
.surface-body form>.actions {
  padding-top:8px;
  position:sticky;
  bottom:-16px;
  background:#f7f9fae8;
  padding-bottom:4px
}
.surface-body .form-label:first-child {
  margin-top:0
}
.surface-body .listrow {
  min-height:54px;
  padding:9px 5px
}
.surface-body .listrow button {
  font-size:12px;
  padding:6px 9px
}
.surface-body .card {
  background:#ffffff9c;
  border-color:#e2e8eb
}
.surface-body p {
  line-height:1.65;
  overflow-wrap:anywhere
}
.surface-body input,.surface-body select,.surface-body textarea {
  max-width:100%
}
.checkrow {
  min-height:42px;
  padding:7px 0;
  font-size:13px
}
.checkrow input {
  min-height:18px;
  flex-shrink:0
}
.checkrow label {
  min-width:0
}
.poll-form+.poll-form {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:18px
}
#sheet[data-kind=menu] {
  width:230px;
  max-height:min(420px,calc(var(--app-height,100dvh) - 20px));
  border-radius:15px;
  background:#f9fbfcf5;
  box-shadow:0 8px 30px #2f455b26
}
#sheet[data-kind=menu] .sheet-head {
  min-height:40px;
  padding:4px 7px 4px 12px
}
#sheet[data-kind=menu] .sheet-head h2 {
  font-size:12px;
  font-weight:500;
  color:#839197
}
#sheet[data-kind=menu] .surface-body {
  padding:6px
}
#sheet[data-kind=menu] .stack {
  gap:2px
}
#sheet[data-kind=menu] .stack>button {
  border:0;
  background:transparent;
  border-radius:9px;
  text-align:left;
  padding:10px 12px;
  min-height:38px
}
#sheet[data-kind=menu] .stack>button:hover {
  background:#e4ebee
}
#sheet[data-kind=menu] .features {
  grid-template-columns:repeat(4,1fr);
  gap:3px
}
#sheet[data-kind=menu] .features button {
  padding:5px;
  min-height:44px;
  font-size:23px;
  border:0;
  background:transparent
}
#sheet[data-kind=confirm] {
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(360px,calc(100vw - 32px));
  border-radius:20px
}
#sheet::backdrop {
  background:#263b4a30;
  backdrop-filter:blur(3px)
}
.activity-dock {
  padding:0;
  flex-shrink:0
}
.activity-dock .toggle {
  width:100%;
  text-align:left;
  min-height:30px;
  padding:4px 9px;
  border-radius:9px;
  font-size:11px;
  background:#e7edef77;
  color:#667b86;
  margin-bottom:6px
}
.game-card {
  padding:12px;
  border-radius:16px;
  background:#ffffffad
}
.game-card h2 {
  font-size:17px
}
.game-card>.row:first-child strong {
  font-size:13px
}
.game-card .activity-description {
  font-size:11px;
  margin:6px 0 9px
}
.game-card .actions {
  flex-wrap:wrap;
  margin-top:8px
}
.game-card button {
  font-size:12px;
  padding:7px 10px;
  min-height:34px
}
.game-card .row .avatar {
  width:25px;
  height:25px;
  border-radius:9px
}
.game-card>.row:has(.avatar) {
  gap:4px
}
.game-card .advanced summary {
  min-height:26px;
  font-size:11px
}
.video-stage {
  height:clamp(180px,31vh,310px)
}
.activity-dock>.actions,.activity-dock #activity-content>.actions {
  margin:4px 0 0;
  justify-content:flex-end;
  gap:5px
}
.activity-dock .actions>button {
  font-size:11px;
  min-height:30px;
  padding:5px 9px
}
.game-card .options button {
  min-height:38px
}
.game-card .scores {
  margin:7px 0
}
.game-card .drawing {
  max-height:110px
}
.game-card .stack {
  gap:4px
}
#toast {
  font-size:12px;
  bottom:22px;
  padding:10px 16px;
  z-index:100
}
.auth-panel {
  border-radius:22px;
  padding:23px
}
.auth-panel .actions>* {
  flex:1
}
.auth-panel .local-note summary {
  cursor:pointer;
  padding:6px 0
}
.auth-panel .local-note {
  font-size:10px
}
.auth-panel .local-note[open] {
  line-height:1.8
}
.auth-panel .form-label {
  margin-top:11px
}
.auth-panel input {
  min-height:42px
}
.auth-panel button {
  min-height:40px
}
@media(min-width:701px) and (max-width:1100px) {
  .app-shell {
    grid-template-columns:260px minmax(0,1fr)
  }
  body.detail-open .app-shell {
    grid-template-columns:220px minmax(0,1fr) 300px
  }
  #sheet[data-kind=detail] {
    width:300px
  }
  .workspace {
    padding:12px
  }
  .header-actions .activity-entry span {
    display:none
  }
  .workspace header small {
    display:none
  }
}
@media(max-width:700px) {
  :root {
    --control:44px
  }
  .app-shell {
    width:100%;
    height:var(--app-height,100dvh);
    position:fixed;
    top:var(--viewport-top,0px);
    left:0;
    margin:0;
    border-radius:0;
    display:block
  }
  .sidebar {
    padding:16px 12px max(10px,env(safe-area-inset-bottom))
  }
  .sidebar-content {
    scrollbar-gutter:auto
  }
  .brand {
    margin-bottom:17px
  }
  .brand small {
    font-size:9px
  }
  .listrow {
    min-height:72px;
    padding:12px 10px
  }
  .listrow strong {
    font-size:15px
  }
  .listrow .avatar {
    width:44px;
    height:44px
  }
  .section-head .icon {
    width:44px;
    height:44px
  }
  .segmented button {
    min-height:44px
  }
  #search-chats,#search-contacts {
    min-height:42px
  }
  .bottom-nav {
    margin-top:8px
  }
  .bottom-nav button {
    min-height:54px
  }
  .workspace {
    padding:6px 12px max(10px,env(safe-area-inset-bottom))
  }
  .workspace>header {
    gap:4px;
    min-height:58px;
    padding:3px 0 8px;
    margin-bottom:7px
  }
  .workspace header>[data-action=back] {
    display:grid
  }
  .workspace header strong {
    font-size:15px
  }
  .workspace header small {
    font-size:9px;
    max-width:60px
  }
  .header-actions {
    gap:0
  }
  .header-actions>[data-action=search-messages] {
    display:none
  }
  .header-actions .icon {
    width:38px;
    min-height:44px
  }
  .activity-entry {
    min-height:44px;
    min-width:38px;
    background:none;
    padding:8px
  }
  .activity-entry span {
    display:none
  }
  .activity-entry svg {
    width:20px
  }
  .message-scroll {
    padding:12px 1px
  }
  .message-area {
    min-height:100px
  }
  .messages {
    gap:16px
  }
  .message .avatar {
    width:32px;
    height:32px;
    border-radius:11px
  }
  .message {
    gap:8px
  }
  .bubblewrap {
    max-width:78%
  }
  .msgmenu {
    min-height:28px;
    min-width:30px;
    opacity:.7
  }
  .bubble {
    font-size:14px;
    padding:9px 11px
  }
  .composer {
    padding:4px;
    gap:0;
    border-radius:16px
  }
  .composer .icon {
    width:40px;
    height:44px;
    min-height:44px
  }
  .composer textarea {
    font-size:16px;
    min-height:44px;
    padding:12px 5px
  }
  .replybar {
    padding:4px 8px
  }
  .replybar .icon {
    height:36px;
    min-height:36px
  }
  .navrow {
    min-height:46px;
    padding:10px 12px;
    font-size:14px
  }
  .action-group {
    margin-bottom:16px
  }
  .feature {
    min-height:120px
  }
  .feature-copy strong {
    font-size:15px
  }
  .feature-hero h2 {
    font-size:21px
  }
  .surface-body button {
    min-height:44px
  }
  .sheet-head .icon {
    width:44px;
    height:44px
  }
  .sheet-head {
    min-height:58px;
    padding:6px 9px
  }
  .sheet-head h2 {
    font-size:16px
  }
  #sheet[data-kind=detail] {
    width:min(390px,calc(100% - 20px));
    right:10px;
    left:auto;
    top:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    height:auto;
    max-height:min(76dvh,calc(var(--app-height,100dvh) - 18px));
    border-radius:20px;
    box-shadow:0 12px 65px #243a4b33
  }
  #sheet[data-kind=menu] {
    width:232px
  }
  .surface-body {
    padding:14px
  }
  .surface-body .listrow {
    min-height:56px
  }
  .surface-body .form-label {
    font-size:12px
  }
  .surface-body input,.surface-body textarea,.surface-body select {
    font-size:16px;
    min-height:44px
  }
  .surface-body input[type=checkbox],.surface-body input[type=radio] {
    min-height:18px
  }
  .game-card {
    padding:10px
  }
  .game-card .actions>button,.game-card .options button {
    min-height:44px;
    font-size:12px
  }
  .game-card .actions {
    gap:5px
  }
  .game-card .advanced summary {
    min-height:36px
  }
  .game-card .drawing {
    max-height:95px
  }
  .video-stage {
    height:clamp(155px,27dvh,235px)
  }
  .activity-dock #activity-content>.actions>button {
    min-height:44px
  }
  .activity-dock .toggle {
    min-height:36px
  }
  .auth-intro {
    top:16%;
  }
  .auth-panel {
    bottom:18px;
    max-height:66%;
    padding:19px
  }
  .auth-intro h1 {
    font-size:27px
  }
  .auth-intro p {
    font-size:12px
  }
  .auth .lang {
    min-height:42px
  }
  .auth-motion {
    min-height:32px
  }
}
@media(max-height:570px) {
  .auth-intro {
    display:none
  }
  .auth-panel {
    top:85px;
    bottom:10px;
    transform:none;
    max-height:calc(var(--app-height,100dvh) - 100px)
  }
  .auth-motion {
    display:none
  }
  .message-area {
    min-height:70px
  }
  .video-stage {
    height:150px
  }
}
/* Mobile details leave the composer reachable;
they do not cover the whole conversation. */
@media(max-width:700px) {
  body.detail-open #sheet[data-kind=detail] {
    bottom:calc(var(--panel-bottom-gap,78px) + var(--viewport-bottom,0px));
    max-height:min(58dvh,calc(var(--app-height,100dvh) - var(--panel-bottom-gap,78px) - 20px))
  }
  body.detail-open:not(:has(.app-shell.in-room)) #sheet[data-kind=detail] {
    bottom:calc(var(--panel-bottom-gap,78px) + var(--viewport-bottom,0px));
    max-height:min(65dvh,calc(var(--app-height,100dvh) - var(--panel-bottom-gap,78px) - 20px))
  }
  .msgmenu {
    position:relative
  }
  .msgmenu:before {
    content:'';
    position:absolute;
    inset:-8px 0
  }
  .auth-panel:has(#f-code) {
    max-height:72%;
  }
  .auth:has(#f-code) .auth-intro {
    top:105px
  }
  .auth:has(#f-code) .auth-intro p {
    display:none
  }
}
@media(min-width:701px) and (max-width:950px) {
  body.detail-open .app-shell {
    grid-template-columns:74px minmax(0,1fr) 300px
  }
  body.detail-open .sidebar {
    padding-inline:7px
  }
  body.detail-open .sidebar .brand,body.detail-open .sidebar .section-head,body.detail-open .sidebar #search-chats,body.detail-open .sidebar .listrow>.grow,body.detail-open .sidebar .listrow>.stack {
    display:none
  }
  body.detail-open .sidebar .listrow {
    padding:10px;
    justify-content:center
  }
  body.detail-open .sidebar .bottom-nav {
    flex-direction:column
  }
  body.detail-open .sidebar .bottom-nav button {
    font-size:10px
  }
}
.actions .primary {
  margin-left:0
}
.surface-body form>.actions .primary:last-child {
  margin-left:auto
}
.activity-dock .actions {
  justify-content:flex-start
}
.game-card .actions>button {
  flex:0 1 auto
}
.game-card .actions>button:last-child {
  margin-left:auto
}
#sheet[data-title="绘画面板"] {
  width:min(650px,calc(100vw - 24px))
}
.surface-body {
  scrollbar-width:thin
}
.palette button {
  min-height:28px
}
.palette {
  padding:7px 0
}
.sheet-head h2 {
  overflow-wrap:anywhere
}
@keyframes surface-appear {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
#sheet[open] {
  animation:surface-appear .18s ease-out
}
@media(prefers-reduced-motion:reduce) {
  #sheet[open] {
    animation:none
  }
}
@media(max-width:700px) {
  #sheet[data-kind=menu] .stack>button {
    min-height:44px
  }
  .composer .icon {
    width:44px
  }
  .header-actions .icon,.activity-entry {
    min-width:44px;
    width:44px
  }
  .contacts-heading .icon {
    width:44px;
    height:44px
  }
  .advanced summary {
    min-height:44px
  }
}

/* Conversation continuity: draft, delivery feedback and quoted-message navigation. */
.draft-label { color:#95624f; font-weight:600; margin-right:4px }
.message-state { font-size:11px; color:var(--muted); padding:4px 0; min-height:18px }
.failed { font-size:12px; min-height:32px; padding:4px 6px; text-align:left }
.bubble .quote-link { display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; max-width:340px; min-height:40px; padding:6px 9px; margin:0 0 7px; border:0; border-left:3px solid #8ea5ae; border-radius:5px; background:#617b8810; color:#526873; text-align:left; font-size:12px; white-space:normal; user-select:none; -webkit-user-select:none }
.quote-link span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere }
.quote-link:hover { background:#617b8823 }
.message-highlight .bubble { animation:quote-focus 1.6s ease-out }
@keyframes quote-focus { 0%,30% { box-shadow:0 0 0 3px #94aeba80; background:#dae7eb } 100% { box-shadow:0 0 0 0 transparent } }
.original-message .message { margin:0 }
.original-message .bubblewrap { max-width:100% }
.original-message .avatar,.original-message .msgmeta { display:none }
@media (prefers-reduced-motion:reduce) { .message-highlight .bubble { animation:none; outline:2px solid #94aeba } }
@media (max-width:700px) { .bubble .quote-link { min-height:44px } }
.team-chatbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 10px; margin-top:7px; background:#e4ecefb0; border-radius:10px; font-size:12px; color:#526873; flex-shrink:0 }
.team-chatbar[hidden] { display:none }
.team-chatbar button { min-height:32px; font-size:12px; padding:4px 8px; border:0; background:#fff9 }
@media (max-width:700px) { .team-chatbar button { min-height:40px } }

.storage-note{padding:8px 16px;font-size:12px;color:#885722;background:#fff4df;flex-shrink:0}

@media(max-width:700px){
 #sheet[data-kind=confirm]{top:calc(var(--viewport-top,0px) + var(--app-height,100dvh)/2);max-height:calc(var(--app-height,100dvh) - 24px)}
 #toast{bottom:calc(var(--viewport-bottom,0px) + 90px)}
 .auth{height:var(--app-height,100dvh);min-height:0}
}

/* Shared square avatars across conversation lists, messages and profiles. */
.avatar,.listrow .avatar,.message .avatar,.profile .avatar,#conversation-list .avatar.group{border-radius:0}
.conversation-title{display:flex;align-items:center;gap:6px;min-width:0}
.conversation-title strong{min-width:0}
.group-label{flex-shrink:0;font-size:10px;line-height:16px;padding:0 4px;border:1px solid #9aa4aa;border-radius:5px;color:#738089;font-weight:500}
/* Per-account conversation organisation and accessible swipe alternatives. */
.conversation-row{position:relative;overflow:hidden;border-radius:14px;touch-action:pan-y;border-bottom:1px solid #dce2e559}
.conversation-row>[data-action=open-room]{position:relative;z-index:1;background:#f7f8f8;transform:translateX(var(--swipe,0px));transition:transform .2s ease,background .15s;padding-right:32px}
.conversation-row>.listrow.current{background:#e2e9ec}
.conversation-row.pressing>.listrow{background:#edf0f1}
.conversation-row.dragging>.listrow{transition:none}
.swipe-pin{position:absolute;inset:0 auto 0 0;width:56px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#e2e9e8;color:#60767c;opacity:0;transition:opacity .15s}
.dragging .swipe-pin,.pin-broken .swipe-pin{opacity:1}
.swipe-pin small{font-size:9px;white-space:nowrap}
.pin-glyph{display:block;transform:rotate(calc(var(--strain,0)*-24deg)) scaleY(calc(1 - var(--strain,0)*.2));transform-origin:50% 85%}
.swipe-pin svg{width:21px;height:21px;display:block}
.pin-ready .swipe-pin{color:#314e56}
.pin-shaking.pin-ready .pin-glyph svg{animation:pin-strain .16s ease-in-out infinite alternate}
@keyframes pin-strain{to{transform:translateX(calc(var(--strain,0)*1.4px))}}
.pin-pieces{position:absolute;top:calc(50% - 18px);left:17px;width:21px;height:21px;display:none}
.pin-pieces i{position:absolute;inset:0;clip-path:inset(0 50% 50% 0);animation:pin-break .42s ease-out both}
.pin-pieces i:nth-child(2){clip-path:inset(0 0 50% 50%)}
.pin-pieces i:nth-child(3){clip-path:inset(50% 50% 0 0)}
.pin-pieces i:nth-child(4){clip-path:inset(50% 0 0 50%)}
.pin-broken .swipe-pin{z-index:3;background:transparent;pointer-events:none}.pin-broken .pin-pieces{display:block}.pin-broken .pin-glyph,.pin-broken .swipe-pin small{opacity:0}
@keyframes pin-break{to{transform:translate(calc((var(--piece) - 1.5)*9px),12px) rotate(calc((var(--piece) - 1.5)*25deg));opacity:0}}
@media(prefers-reduced-motion:reduce){.pin-glyph,.pin-pieces i,.pin-shaking.pin-ready .pin-glyph svg{animation:none;transform:none}.pin-broken .pin-pieces{display:none}}
.row-more{position:absolute;z-index:2;right:0;top:50%;transform:translateY(-50%);width:30px;height:44px;padding:0;border:0;background:transparent;font-size:14px;color:#829198}
.dragging .row-more{visibility:hidden}
.conversation-marker{font-size:10px;line-height:1.2;color:#849198;white-space:nowrap}
.chat-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;border-bottom:1px solid #e5e9ea}
.chat-switch{padding:0 12px;cursor:pointer}
.chat-switch input{appearance:none;-webkit-appearance:none;position:relative;width:38px!important;min-width:38px;height:23px!important;min-height:23px;margin:0;padding:0;border:1px solid #a7b3b8;border-radius:20px;background:#c3cccf;flex-shrink:0;cursor:pointer;box-shadow:none;transition:background .18s}
.chat-switch input::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #243c4326;transition:transform .18s}
.chat-switch input:checked{background:#526e72;border-color:#526e72}
.chat-switch input:checked::after{transform:translateX(15px)}
.chat-switch input:focus-visible{outline:2px solid #527782;outline-offset:3px}
.mention-setting{padding-left:14px}.mention-setting[hidden]{display:none}
.preference-status{display:block;color:#81908a;min-height:20px}
.bottom-nav button{position:relative}.nav-unread{position:absolute;top:4px;right:16%}
@media(prefers-reduced-motion:reduce){.conversation-row>[data-action=open-room]{transition:none}}

/* Compact conversation controls, shared on touch and desktop. */
.conversation-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;min-width:34px}
.conversation-status{display:flex;gap:5px;color:#788b94}.conversation-status:empty{display:none}
.conversation-status svg{width:13px;height:13px;display:block}
.conversation-menu-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 12px 10px;color:#37494f}
.conversation-option{display:flex;align-items:center;gap:11px;width:100%}
.conversation-option svg{width:18px;height:18px;flex-shrink:0}
#sheet[data-kind=menu] hr{border:0;border-top:1px solid #dbe2e5;width:calc(100% - 20px);margin:5px auto}
.conversation-row>[data-action=open-room]{padding-right:44px}
.row-more{width:40px;border-radius:9px}
.row-more:hover,.row-more:focus-visible{background:#dce5e9;color:#354d58}
.room-summary:has(>.avatar){display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:center}
.room-summary>.avatar{grid-row:1 / 3;width:48px;height:48px}
.room-summary:has(>.avatar) h2{margin:0;overflow-wrap:anywhere}
.room-summary:has(>.avatar)>p{grid-column:1 / -1;margin:12px 0 0;line-height:1.6}
.preference-status:empty{display:none}
.preference-status:not(:empty){padding:6px 12px;font-size:11px}
.mention-setting small{display:block;padding:7px 12px 10px;color:#738189;line-height:1.5}
@media(max-width:700px){.row-more{width:44px}.conversation-row>[data-action=open-room]{padding-right:46px}}
@media(prefers-reduced-motion:reduce){.chat-switch input,.chat-switch input::after{transition:none}}

/* Message selection, delivery state and member suggestions. */
.selection-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:#eef2f4;border-top:1px solid #d5dfe3;flex-shrink:0}
.selection-bar>span{margin-right:auto;font-size:12px}.selection-bar button{min-height:40px;padding:6px 10px}
.message-select{align-self:center;flex-shrink:0;width:36px;min-height:40px;padding:0;border:0;background:transparent;color:#697f86}
.message-select[aria-pressed=true]{color:#315d66;background:#dcebee;border-radius:9px}
.delivery-receipt{display:block;font-size:10px;color:#75898e;text-align:right;padding-top:3px}
.forwarded-label{display:block;font-size:11px;color:#74838a;margin-bottom:5px}
.mention-picker{flex-shrink:0;max-height:180px;overflow:auto;background:#f7fafb;border:1px solid #dce4e7;border-radius:14px;margin:0 12px 6px;padding:5px}
.mention-picker .listrow{min-height:44px;padding:6px 10px}.mention-picker .avatar{width:28px;height:28px}
.device-card{padding:12px;border-bottom:1px solid #dce4e7}.device-card p{font-size:12px;color:#78868b;overflow-wrap:anywhere;margin:6px 0}.device-card button{display:block;margin-top:10px}
.unread-anchor{align-self:center;font-size:12px;min-height:36px;border-radius:16px;background:#eaf0f2;color:#46636d;margin:4px 0}
@media(max-width:700px){.message-select,.selection-bar button{min-height:44px}.selection-bar{gap:4px}}
.invite-qr{text-align:center;margin:16px auto}.invite-qr svg{width:180px;max-width:100%;height:auto;border-radius:8px;shape-rendering:crispEdges}.invite-qr figcaption{font-size:12px;color:#697d87;line-height:1.7}

.catalog-categories{border:1px solid var(--line,#d9dfe1);border-radius:12px;margin:12px 0;padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.catalog-categories label{display:flex;align-items:center;gap:8px;min-height:44px}.catalog-categories input{width:18px;height:18px;min-height:0;padding:0}.catalog-categories legend{font-size:13px;color:var(--muted,#647780)}

.archive-heading{justify-content:flex-start;gap:8px}
.archive-heading h2{font-size:17px;margin:0;outline:none}
.archive-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#819b98}
.conversation-row.archiving{opacity:0;transform:translateX(-18px);transition:opacity .18s,transform .18s}
#toast button{border:0;background:transparent;color:#d5ece8;font-weight:600;margin-left:12px;padding:6px 10px;min-height:44px}

/* Local photographic group mosaics retain the shared square silhouette. */
.avatar.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1px;background:#fff}
.avatar.photo-grid img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:cover}

/* Activity is a prefix, never a third line in the conversation list. */
#conversation-list .conversation-preview-line{display:flex;align-items:baseline;gap:5px;min-width:0;line-height:18px;height:18px;margin:4px 0 0}
.conversation-preview-line .conversation-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.conversation-activity{flex-shrink:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#587477;font-size:11px}
.conversation-activity::before{content:'['}.conversation-activity::after{content:']'}
#conversation-list .conversation-title{height:20px;line-height:20px}

/* Native transparent icons, below the nickname line, without bubble layout changes. */
chat-greeting{position:absolute;display:block;right:-14px;top:0;width:28px;height:28px;margin:0;overflow:hidden;border:0;border-radius:0;background:transparent;pointer-events:none;user-select:none}
.mine .bubble chat-greeting{left:-14px;right:auto}
chat-greeting canvas{display:block;width:28px;height:28px}
.bubble chat-greeting img.greeting-fallback{display:none}
chat-greeting[data-ready=error]{display:none}

.composer .composer-primary.send-button:hover{background:#26856f}
.composer .composer-primary{flex-shrink:0}

.message-person-avatar{display:block;align-self:flex-start;padding:0;border:0;border-radius:0;background:transparent;flex-shrink:0}
.message-person-name{padding:0;border:0;background:transparent;font:inherit;color:inherit;border-radius:3px}
.message-person-avatar:focus-visible,.message-person-name:focus-visible{outline:2px solid #2f9b83;outline-offset:2px}

.friend-request .row{align-items:flex-start}
.friend-request .avatar{width:44px;height:44px;border-radius:0}
.friend-request .grow{overflow-wrap:anywhere}
.friend-request .grow p{margin:4px 0 0}

@media(max-width:700px){
 .keyboard-open .workspace{padding-bottom:6px}
 .keyboard-open .composer textarea{max-height:min(120px,25vh)}
}