/* Approved header: quieter hierarchy and feedback without moving call surfaces. */
.call-header .room-access-header { gap:10px;padding-left:22px;font-size:18px;font-weight:650; }
.call-header .room-code-label { color:var(--theme-text-primary,#f4f5f8);font-size:16px;font-weight:600; }
.call-header #copy-room-code { gap:7px;padding:0;color:var(--theme-text-secondary,#b5b7bf);border-radius:5px;-webkit-app-region:no-drag; }
.call-header .room-code-value { font-size:19px;font-weight:720;line-height:1.2;letter-spacing:-.01em; }
.call-header #copy-room-code:focus-visible { outline:2px solid var(--theme-focus,#3498ff);outline-offset:4px; }
.call-header .room-code-copy-icon {
  display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid transparent;border-radius:50%;
  color:var(--theme-text-secondary,#b5b7bf);background:transparent;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 140ms cubic-bezier(.22,.8,.25,1);
}
.call-header .room-code-copy-icon>span { display:grid;grid-area:1/1;place-items:center;transition:opacity 160ms ease,transform 180ms cubic-bezier(.22,.8,.25,1); }
.call-header .room-code-copy-icon svg { width:17px;height:17px; }
.call-header .room-code-check { opacity:0;transform:scale(.65); }
.call-header #copy-room-code:is(:hover,:focus-visible) .room-code-copy-icon {
  border-color:color-mix(in srgb,var(--theme-border-strong,#777780) 65%,transparent);
  background:var(--theme-surface-hover,#202126);color:var(--theme-text-primary,#f4f5f8);
}
.call-header #copy-room-code:active .room-code-copy-icon { transform:scale(.92); }
.call-header #copy-room-code.is-copied .room-code-copy { opacity:0;transform:scale(.75); }
.call-header #copy-room-code.is-copied .room-code-check { opacity:1;transform:scale(1); }
.call-header #copy-room-code.is-copied .room-code-copy-icon { color:var(--theme-success-text,#65d8a6); }
.call-header .call-connection-state { gap:7px;font-size:11px;font-weight:450;white-space:nowrap; }
.call-header .connection-dot { width:6px;height:6px; }
.call-header>.call-header-utility { min-width:42px; }
.call-header .latency-button {
  display:grid;grid-template-columns:18px minmax(0,1fr) 7px;gap:8px;width:144px;min-height:32px;padding:0 10px;
  border-color:color-mix(in srgb,var(--theme-border-strong,#777780) 60%,transparent);
  background:var(--theme-surface-elevated,#111114);box-shadow:inset 0 1px rgba(var(--theme-highlight-rgb,255,255,255),.025);
  transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease,scale 140ms ease;
}
.call-header .latency-button>output { min-width:0;white-space:nowrap;text-align:center;font-size:12px;font-weight:650;line-height:1.3;font-variant-numeric:tabular-nums; }
:root:lang(en) .call-header .latency-button { width:172px; }
.call-header .latency-button>.latency-chevron { margin-left:0; }
.call-header .latency-button:is(:hover,:focus-visible,[aria-expanded=true]) {
  border-color:var(--theme-border-strong,#777780);background:var(--theme-surface-hover,#202126);
}
.call-header .latency-button:focus-visible { outline:2px solid var(--theme-focus,#3498ff);outline-offset:3px; }
/* Preserve the preset's own colors with the same softer border weight. */
:root[data-theme=nexo] .call-header .latency-button { border-color:rgba(119,104,221,.32); }
:root[data-theme=nexo] .call-header .latency-button:is(:hover,:focus-visible,[aria-expanded=true]) { border-color:rgba(162,150,255,.65); }
@media(max-width:1000px) {
  .call-header { column-gap:10px;padding-inline:16px; }
  .call-header .room-access-header { padding-left:15px;gap:8px; }
}
@media(max-width:680px) {
  .call-header { column-gap:10px;padding-inline:12px; }
  .call-header .room-access-header { padding-left:0;border-left:0;gap:6px; }
  .call-header .room-code-label { font-size:13px; }
  .call-header .room-code-value { font-size:14px; }
  .call-header .room-code-copy-icon { width:26px;height:26px; }
}
@media(max-width:860px) {
  .call-header>.call-connection-state,.call-header>#latency-control-host { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .call-header :is(.room-code-copy-icon,.room-code-copy-icon>span,.latency-button) { transition:none; }
  .call-header #copy-room-code:active .room-code-copy-icon { transform:none; }
}

/* Keep room actions in one explicit row below desktop window controls. */
.call-header{grid-template-columns:auto auto auto auto minmax(42px,1fr) auto auto;grid-template-rows:1fr}
.call-header>.brand{grid-column:1;grid-row:1}
.call-header>.room-access-header{grid-column:2;grid-row:1}
.call-header>.copy-link{grid-column:6;grid-row:1;white-space:nowrap}
.call-header>.call-account{grid-column:7;grid-row:1}
body:has(#desktop-window-chrome:not([hidden])) .call-header{padding-top:20px}
@media(max-width:1000px){
 .call-header>.call-connection-state,.call-header>#latency-control-host{display:none}
}
@media(max-width:860px){
 .call-header>.copy-link{width:40px;min-width:40px;padding:0;justify-content:center}
 .call-header>.copy-link>span{display:none}
 .call-header>.call-account small{display:none!important}
 .call-header>.call-account strong{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:680px){
 .call-header{grid-template-columns:minmax(42px,1fr) auto auto;grid-template-rows:auto auto;gap:6px 10px;padding:8px 12px}
 .call-header>.room-access-header{grid-column:2/-1;grid-row:1;justify-self:end}
 .call-header>.call-header-utility{grid-column:1;grid-row:2}
 .call-header>.copy-link{grid-column:2;grid-row:2}
 .call-header>.call-account{grid-column:3;grid-row:2}
 body:has(#desktop-window-chrome:not([hidden])) .call-shell{grid-template-rows:144px minmax(0,1fr) auto}
 body:has(#desktop-window-chrome:not([hidden])) .call-header{min-height:144px;padding-top:40px}
}