/* css/header-r1.css — retained in original cascade order. */
#chat.header-r1 .topbar{justify-content:flex-end;border:0;gap:0;}
#chat.header-r1 .topbar>strong,#chat.header-r1 #my-nick,#chat.header-r1 #status{display:none!important;}
#chat.header-r1 .top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
#chat.header-r1 .top-actions #bottom-tabs{display:flex;flex:none;align-items:center;gap:4px;background:transparent;border:0;padding:0;margin:0;}
#chat.header-r1 .top-actions #bottom-tabs button,#chat.header-r1 #appearance-open{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;min-height:40px;margin:0;padding:0;border:0;background:transparent;border-radius:10px;color:var(--muted);}
#chat.header-r1 .top-actions #bottom-tabs button.selected{color:var(--purple);}
#chat.header-r1 #bottom-tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
#chat.header-r1 #bottom-tabs .tab-badges{position:absolute;top:0;right:-2px;display:flex;gap:2px;pointer-events:none;}
#chat.header-r1 #bottom-tabs .tab-count{min-width:14px;height:14px;font-size:9px;padding:0 3px;}
#chat.header-r1 #bottom-tabs .tab-count[hidden]{display:none;}
#chat.header-r1 #connection-indicator{display:grid;place-items:center;flex:none;width:32px;height:40px;padding:0;border:0;background:transparent;}
#connection-indicator span{width:9px;height:9px;border-radius:50%;background:#8b8794;}
#connection-indicator[data-state=online] span{background:#85dba2;}
#connection-indicator[data-state=retrying] span{background:#eeb268;}
#chat.header-r1:not(.private-view):not(.server-view) .conversation-title{display:none;}
#chat.header-r1 .conversation-head{height:44px;min-height:44px;padding:0 14px;justify-content:flex-end;border:0;gap:6px;}
#chat.header-r1.private-view .conversation-head,#chat.header-r1.server-view .conversation-head{height:auto;min-height:44px;padding-block:8px;}
#chat.header-r1.private-view .conversation-title,#chat.header-r1.server-view .conversation-title{margin-right:auto;}
#chat.header-r1 #rooms-toggle,#chat.header-r1 #head-user-count,#chat.header-r1 #user-count{display:none!important;}
#chat.header-r1 #users-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:8px;border:0;background:transparent;color:var(--purple);}
#chat.header-r1 #users-toggle svg{display:block;width:24px;height:24px;min-width:24px;min-height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#chat.header-r1.private-view #users-toggle,#chat.header-r1.server-view #users-toggle{display:none;}
#chat.header-r1 .users-panel h2{height:44px;min-height:44px;margin:0;}
#chat.header-r1 #call-phone,#chat.header-r1 #call-video{flex:none;width:40px;height:40px;margin:0;padding:8px;}
#settings-menu,#connection-info{box-sizing:border-box;width:min(90vw,360px);padding:18px;border:1px solid var(--zw-border,#494158);border-radius:18px;background:var(--zw-panel,#191720);color:var(--zw-text,#eee);}
#settings-menu::backdrop,#connection-info::backdrop{background:#0008;}
#settings-menu header,#connection-info header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;}
#settings-menu header button,#connection-info header button{border:0;background:transparent;padding:4px 8px;font-size:22px;}
#settings-menu nav{display:flex;flex-direction:column;gap:8px;}
#settings-menu nav button,#settings-menu nav a{display:block;text-align:left;padding:12px 14px;border:0;border-radius:10px;background:transparent;color:inherit;text-decoration:none;font:inherit;}
#settings-menu nav [hidden]{display:none!important;}
#settings-menu nav button:hover,#settings-menu nav a:hover{background:#a685d51a;}
#settings-menu #leave{margin-top:16px;color:#eeaaaa;}
@media(max-width:760px){#chat.header-r1 .topbar{padding:0 8px;}#chat.header-r1 .top-actions{gap:4px;}#chat.header-r1 .conversation-head{padding-inline:12px;}#chat.header-r1 #ui-backdrop:not([hidden]){inset:42px 0 0;}}


/* css/interactions.css — retained in original cascade order. */
.message-actions{display:flex;align-items:center;gap:3px;margin-top:5px;min-height:28px;color:var(--muted,#9995aa)}
.message-actions button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:6px;border:0;border-radius:7px;background:transparent;color:inherit;cursor:pointer;opacity:.64;transition:opacity .15s,background .15s,transform .15s}
.message-actions button:hover,.message-actions button:focus-visible{opacity:1;background:#ffffff0a}.message-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.message-actions .interaction-heart[aria-pressed=true]{opacity:1}.interaction-heart[aria-pressed=true] svg{fill:currentColor}.message-actions button:active{transform:scale(.9)}.message-actions .interaction-count{width:auto;min-width:20px;padding:3px;font-size:11px;opacity:.8}
.interaction-draft{display:flex;align-items:center;gap:10px;margin:4px 12px;padding:8px 12px;border-left:2px solid #a780dc;border-radius:5px;background:#ffffff05;font-size:12px;flex:none}.interaction-draft[hidden]{display:none}.interaction-draft>div{flex:1;min-width:0}.interaction-draft span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#aaa6b7;margin-top:3px}.interaction-draft button{border:0;background:transparent;color:inherit;padding:8px;cursor:pointer}.interaction-quote{display:block;width:100%;text-align:left;margin:5px 0 8px;padding:7px 10px;border:0;border-left:2px solid #a780dc;border-radius:4px;background:#ffffff05;color:inherit;cursor:pointer}.interaction-quote strong{display:block;color:#aaa2b8;font-size:11px;font-weight:500}.interaction-quote span{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.interaction-edited{font-size:10px;color:#93909d}.interaction-highlight{background:#a780dc18;border-radius:8px;transition:background .5s}.interaction-likers{max-width:280px;background:#191823;color:#eee;border:1px solid #ffffff15;border-radius:12px;padding:14px;font-size:13px}.interaction-likers>div{padding:5px}.interaction-likers button{float:right;border:0;background:none;color:inherit;cursor:pointer}.interaction-toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);max-width:min(90vw,430px);z-index:1000;border:1px solid #ffffff15;border-radius:12px;background:#252132;color:#eee;padding:12px 16px;box-shadow:0 8px 30px #0005;font-size:13px;cursor:pointer}.interaction-toast[hidden]{display:none}
@media(max-width:760px){.message-actions{gap:2px;margin-top:2px}.message-actions button{width:36px;height:34px;padding:9px}.message-actions svg{width:16px;height:16px}.interaction-draft{margin:3px 8px}.interaction-quote{max-width:100%}}
@media(prefers-reduced-motion:reduce){.message-actions button,.interaction-highlight{transition:none}}


/* css/icons-r1.css — retained in original cascade order. */
/* Zworld icons R1: light, transparent controls that blend into the interface. */
#chat .message-actions button,
#chat.header-r1 .top-actions button,
#chat.header-r1 .top-actions #bottom-tabs button,
#chat.header-r1 #appearance-open,
#chat.header-r1 #connection-indicator,
#chat.header-r1 .conversation-head button,
#chat.header-r1 #call-phone,
#chat.header-r1 #call-video {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#chat .message-actions button {
  opacity: .42;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
#chat .message-actions button:hover,
#chat .message-actions button:focus-visible,
#chat .message-actions button:active,
#chat .message-actions .interaction-heart[aria-pressed="true"] {
  opacity: 1;
}
#chat .message-actions button:hover,
#chat .message-actions button:focus-visible {
  color: var(--zw-accent, var(--purple));
}
#chat .message-actions .interaction-heart[aria-pressed="true"] svg {
  filter: drop-shadow(0 0 5px currentColor);
}

#chat.header-r1 .top-actions button,
#chat.header-r1 .top-actions #bottom-tabs button,
#chat.header-r1 #appearance-open,
#chat.header-r1 #connection-indicator,
#chat.header-r1 .conversation-head button {
  opacity: .72;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
#chat.header-r1 .top-actions button:hover,
#chat.header-r1 .top-actions button:focus-visible,
#chat.header-r1 .conversation-head button:hover,
#chat.header-r1 .conversation-head button:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

/* In channels: camera first, members second. Private conversations keep phone then camera. */
#chat.header-r1:not(.private-view):not(.server-view) .conversation-head #call-head-controls {
  display: contents;
}
#chat.header-r1:not(.private-view):not(.server-view) .conversation-head #call-video { order: 1; }
#chat.header-r1:not(.private-view):not(.server-view) .conversation-head #users-toggle { order: 2; }


/* css/icons-r2.css — retained in original cascade order. */
/* Zworld icons R2 — Web only. Same optical weight, no visible plaque. */
html.zw-web-icons-r2 #chat.header-r1 #call-video,
html.zw-web-icons-r2 #chat.header-r1 #users-toggle,
html.zw-web-icons-r2 #chat #call-video,
html.zw-web-icons-r2 #chat #users-toggle {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 7px;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: color-mix(in srgb, var(--purple, #c177ff) 90%, white 10%);
  opacity: .82;
  box-shadow: none !important;
  transition: color .18s ease, opacity .18s ease, transform .18s ease, filter .18s ease;
}

html.zw-web-icons-r2 #chat.header-r1 #call-video svg,
html.zw-web-icons-r2 #chat.header-r1 #users-toggle svg,
html.zw-web-icons-r2 #chat #call-video svg,
html.zw-web-icons-r2 #chat #users-toggle svg {
  display: block;
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

html.zw-web-icons-r2 #chat.header-r1 #call-video:hover,
html.zw-web-icons-r2 #chat.header-r1 #call-video:focus-visible,
html.zw-web-icons-r2 #chat.header-r1 #users-toggle:hover,
html.zw-web-icons-r2 #chat.header-r1 #users-toggle:focus-visible,
html.zw-web-icons-r2 #chat #call-video:hover,
html.zw-web-icons-r2 #chat #call-video:focus-visible,
html.zw-web-icons-r2 #chat #users-toggle:hover,
html.zw-web-icons-r2 #chat #users-toggle:focus-visible {
  color: #d29bff;
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 42%, transparent));
}

html.zw-web-icons-r2 #chat.header-r1 #call-video:focus-visible,
html.zw-web-icons-r2 #chat.header-r1 #users-toggle:focus-visible,
html.zw-web-icons-r2 #chat #call-video:focus-visible,
html.zw-web-icons-r2 #chat #users-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

/* The member toggle can move into the desktop member-panel heading. */
html.zw-web-icons-r2 #chat.header-r1 .users-panel h2 #users-toggle {
  position: static;
  margin: 0;
  padding: 7px;
}

/* Channel layout: camera before members. Private keeps phone then camera. */
html.zw-web-icons-r2 #chat.header-r1:not(.private-view):not(.server-view) .conversation-head #call-head-controls {
  display: contents;
}
html.zw-web-icons-r2 #chat.header-r1:not(.private-view):not(.server-view) .conversation-head #call-video { order: 1; }
html.zw-web-icons-r2 #chat.header-r1:not(.private-view):not(.server-view) .conversation-head #users-toggle { order: 2; }

@media (max-width: 760px) {
  html.zw-web-icons-r2 #chat.header-r1 #call-video,
  html.zw-web-icons-r2 #chat.header-r1 #users-toggle,
  html.zw-web-icons-r2 #chat #call-video,
  html.zw-web-icons-r2 #chat #users-toggle {
    flex-basis: 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 6px;
  }
  html.zw-web-icons-r2 #chat.header-r1 #call-video svg,
  html.zw-web-icons-r2 #chat.header-r1 #users-toggle svg,
  html.zw-web-icons-r2 #chat #call-video svg,
  html.zw-web-icons-r2 #chat #users-toggle svg {
    width: 22px;
    height: 22px;
  }
}