/* Zentrya Remote M2 – Fernwartung (Portal-Ansicht "Fernwartung"); baut auf calls.css auf (.zr-grid, .zr-form, .zr-e2ee, .zr-status) */
#view-remote [hidden] { display: none !important; }
/* A backdrop-filter on the sticky header makes its fixed sidebar relative to
   the header instead of the viewport, covering the left side of the video. */
body:has(#view-remote:not([hidden])) header.top { backdrop-filter: none; -webkit-backdrop-filter: none; }
.zr-rc { background: #0b1120; color: #e5e7eb; border-radius: 14px; padding: 10px; display: grid; gap: 10px; }
.zr-rc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zr-rc-head b { font-size: 1.05rem; margin-right: auto; }
.zr-rc-view { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; max-height: 75vh;
  outline: 2px solid transparent; cursor: default; user-select: none; -webkit-user-select: none; touch-action: none; }
.zr-rc-view:focus { outline-color: #3b82f6; }
.zr-rc-view.controlling { cursor: crosshair; }
.zr-rc-view.controlling:focus { outline-color: #4ade80; }
.zr-rc-view video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.zr-rc-view:fullscreen { aspect-ratio: auto; max-height: none; border-radius: 0; }
.zr-rc-view:fullscreen video { width: 100vw; height: 100vh; }
.zr-rc-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  background: rgba(11,17,32,.78); color: #e5e7eb; font-weight: 600; pointer-events: none; }
.zr-rc-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zr-rc-controls button { font: inherit; font-weight: 600; border: 0; border-radius: 99px; padding: 10px 16px; background: #1e293b;
  color: #e5e7eb; cursor: pointer; min-height: 44px; }
.zr-rc-controls button.hangup { background: #b91c1c; color: #fff; }
.zr-rc-controls button:disabled { opacity: .5; }
.zr-rc-hint { font-size: .8rem; color: #94a3b8; flex: 1 1 260px; }
.zr-rc-dl p { margin: 6px 0; }
.zr-rc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.zr-rc-table th, .zr-rc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e7eb); vertical-align: top; }
.zr-rc-table .btn { margin-top: 0; padding: 4px 10px; font-size: .85rem; }
@media (max-width: 700px) {
  .zr-rc-table thead { display: none; }
  .zr-rc-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
  .zr-rc-table td { border: 0; padding: 2px 0; }
}

.zr-chat{margin-top:20px;padding:20px;background:var(--card,#102332);border:1px solid #296573;border-radius:16px}.zr-chat textarea{display:block;width:100%;box-sizing:border-box;margin:12px 0}.zr-chat-log{max-height:300px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.zr-chat-log p{padding:10px;border-radius:10px;background:#163c49;color:#fff}.zr-chat-log audio,.zr-chat-log a{display:block;margin:10px 0}.zr-chat button{margin:4px}.zr-transfer-status{display:block;margin-top:10px}

/* Customer-approved storage browser; filenames are rendered as text. */
.zr-storage{margin:20px 0;padding:20px;border:1px solid #c6e0df;border-radius:16px;background:#f4faf9;color:#173d43}
.zr-storage[hidden],.zr-storage [hidden]{display:none!important}
.zr-storage h3{margin:0 0 8px}.zr-storage p{overflow-wrap:anywhere}
.zr-storage button,.zr-chat button{border:1px solid #a7c8c7;border-radius:10px;background:#fff;color:#153e43;padding:10px 14px;cursor:pointer;font:inherit}
.zr-storage button:hover,.zr-chat button:hover{background:#e1f2ef}.zr-storage button:disabled{opacity:.45;cursor:default}
.zr-storage-tools,.zr-storage form{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.zr-storage input{flex:1;min-width:180px;border:1px solid #a7c8c7;padding:10px;border-radius:10px;font:inherit}
.zr-storage-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(100px,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #d6e7e5}
.zr-storage-row span,.zr-storage-row small{overflow-wrap:anywhere}.zr-storage-row small{color:#526e73}
@media(max-width:650px){.zr-storage-row{grid-template-columns:1fr auto}.zr-storage-row small{grid-column:1;grid-row:2}.zr-storage-row button{grid-column:2;grid-row:1 / 3}}