/* AnyDesk glass: 24% surface opacity, with fully opaque readable content. */
.panel.remote-support {
  --remote-glass-alpha:.24;
  --remote-surface:rgba(255,230,232,var(--remote-glass-alpha));
  --remote-border:rgba(255,185,195,.48);
  --remote-text:#fffafb;
  --remote-muted:#fffafb;
  --remote-action:#fffafb;
  --remote-hover:rgba(90,50,64,var(--remote-glass-alpha));
  --remote-neutral-bg:rgba(35,44,63,var(--remote-glass-alpha));
  --remote-connected-bg:rgba(22,145,70,var(--remote-glass-alpha));
  --remote-connected-text:#f5fff8;
  --remote-connected-border:rgba(134,239,172,.58);
  --remote-connected-hover:rgba(34,145,80,var(--remote-glass-alpha));
  --remote-disconnected-bg:rgba(239,68,68,var(--remote-glass-alpha));
  --remote-disconnected-text:#fffafb;
  --remote-disconnected-border:rgba(253,164,175,.58);
  min-width:0;
  padding:4px 12px;
  border-color:var(--remote-border);
  border-radius:var(--radius-md);
  background:var(--remote-surface);
  color:var(--remote-text);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  container-type:inline-size;
  container-name:remote-support;
}
/* No confirmed session, initial loading and expired data share a quiet gray
   surface. The brand logo keeps its original colors and the same geometry. */
.panel.remote-support:not([data-remote-state="confirmed"]) {
  --remote-surface:rgba(148,148,148,var(--remote-glass-alpha));
  --remote-border:rgba(203,203,203,.48);
  --remote-hover:rgba(62,62,62,var(--remote-glass-alpha));
}
/* Equal outside tracks center the session group against the entire bar, even
   though the heading and the update action have different intrinsic widths. */
.remote-support-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); align-items:center; gap:0 12px; min-width:0; padding:0 3px; }
.remote-support-heading h2 { grid-column:1; display:flex; align-items:center; gap:8px; margin:0; min-width:0; min-height:44px; overflow-wrap:anywhere; font-size:.9rem; line-height:1.4; color:var(--remote-text); }
.remote-support-logo { display:block; flex:0 0 28px; width:28px; height:28px; object-fit:contain; border-radius:6px; }
.remote-support-session-group { grid-column:2; min-width:0; }
.remote-support-controls { grid-column:3; display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; white-space:nowrap; }
.remote-support-heading .text-button { flex:0 0 auto; min-height:44px; color:var(--remote-action); }
.remote-support-heading .text-button:hover:not(:disabled) { background:var(--remote-hover); }
.remote-support-heading .text-button:disabled { opacity:.65; cursor:wait; }
.remote-support > .field-help { margin:2px 0 5px; color:var(--remote-muted); overflow-wrap:anywhere; }
.remote-support > .field-help:empty { display:none; }
.remote-support-freshness { margin:0; max-width:100%; text-align:center; font-size:.75rem; line-height:1.4; color:var(--remote-muted); overflow-wrap:anywhere; }
.remote-support-freshness:empty,.remote-support-freshness[hidden] { display:none; }
.remote-support-target .remote-support-freshness { grid-area:source; font-weight:400; }
.remote-support-targets { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; min-width:0; margin:0; padding:0 3px; }
.remote-support-targets:empty { display:none; }
.remote-support-session-group:has(.remote-support-targets:empty) .remote-support-freshness { margin-top:14px; }
.remote-support-target { display:flex; flex:0 1 auto; min-width:0; max-width:100%; align-items:center; }
.remote-support-target .secondary-button { display:inline-grid; grid-template-areas:"label" "source"; row-gap:2px; padding:5px 12px; align-items:center; justify-items:center; min-width:0; max-width:100%; min-height:44px; white-space:normal; overflow-wrap:anywhere; text-align:center; color:var(--remote-action); border-color:var(--remote-border); background:var(--remote-neutral-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
/* Both labels occupy the same grid cell and reserve their intrinsic size, so
   pointer and keyboard focus never resize or move the actual click target. */
.remote-support-target-label,.remote-support-hover-label { grid-area:label; min-width:0; max-width:100%; }
.remote-support-hover-label { display:inline-flex; align-items:center; justify-content:center; gap:7px; visibility:hidden; pointer-events:none; }
.remote-support-hover-label img { display:block; flex:0 0 20px; width:20px; height:20px; object-fit:contain; border-radius:4px; }
.remote-support-target[data-session-state="active"] .secondary-button:not(:disabled):is(:hover,:focus-visible) .remote-support-target-label { visibility:hidden; }
.remote-support-target[data-session-state="active"] .secondary-button:not(:disabled):is(:hover,:focus-visible) .remote-support-hover-label { visibility:visible; }
.remote-support-target .secondary-button:hover:not(:disabled) { background:var(--remote-hover); }
.remote-support-target .secondary-button:disabled { opacity:1; color:var(--remote-muted); background:var(--remote-neutral-bg); }
.remote-support-target[data-session-state="active"] .secondary-button { color:var(--remote-connected-text); border-color:var(--remote-connected-border); background:var(--remote-connected-bg); }
.remote-support-target[data-session-state="active"] .secondary-button:hover:not(:disabled) { background:var(--remote-connected-hover); }
.remote-support-target[data-session-state="disconnected"] .secondary-button { color:var(--remote-disconnected-text); border-color:var(--remote-disconnected-border); background:var(--remote-disconnected-bg); }
.remote-support button:focus-visible { outline:2px solid var(--remote-action); outline-offset:-3px; }
.remote-support button:active:not(:disabled) { box-shadow:inset 0 0 0 1px currentColor; }
@media(max-width:600px) {
  .panel.remote-support { padding:4px 10px; }
  .remote-support-heading { gap:0 8px; }
}
@container remote-support (max-width:760px) {
  .remote-support-heading { grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; }
  .remote-support-heading h2 { grid-column:1; grid-row:1; }
  .remote-support-controls { grid-column:2; grid-row:1; }
  .remote-support-session-group { grid-column:1/-1; grid-row:2; padding-bottom:6px; }
  .remote-support-session-group:has(.remote-support-targets:empty) .remote-support-freshness { margin-top:0; }
}
@container remote-support (max-width:520px) {
  .remote-support-targets { display:grid; grid-template-columns:minmax(0,1fr); }
  .remote-support-target,.remote-support-target .secondary-button { width:100%; }
  .remote-support-target-label { display:grid; gap:2px; width:100%; text-align:left; }
  .remote-support-target-label [data-remote-server] { font-weight:800; }
  .remote-support-target-label [data-remote-user]::before { content:"Benutzer: "; font-weight:400; }
  .remote-support-target-label .remote-support-separator { display:none; }
  .remote-support-target .remote-support-freshness { width:100%; text-align:left; }
  .remote-support-heading h2 { font-size:.84rem; }
  .remote-support-logo { width:24px; height:24px; flex-basis:24px; }
  .remote-support-controls .text-button { padding:8px 6px; font-size:.8rem; }
}
@media(forced-colors:active) {
  .panel.remote-support { border-color:CanvasText; background:Canvas; color:CanvasText; }
  .remote-support h2,.remote-support > .field-help,.remote-support-freshness { color:CanvasText; }
  .remote-support button:focus-visible { outline-color:Highlight; }
}