/* Remote Support module: maps the module's colour names onto the portal's palette so the dock, chat and viewer match it. */
:root {
  --primary-color: var(--blue);
  --secondary-color: var(--navy);
  --text-color: var(--navy);
  --muted-text-color: var(--muted);
  --border-color: var(--line);
  --background-color: var(--bg-soft);
  --surface-color: #ffffff;
  --accent-color: var(--teal);
  --ok-color: #166534;
  --warn-color: #b45309;
  --danger-color: #b91c1c;
  --font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
.ra-kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; }
.ra-kv dt { color: var(--muted); } .ra-kv dd { margin: 0; word-break: break-word; }
.ra-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.ra-filters label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ra-filters input, .ra-filters select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.ra-tabs { margin-bottom: 18px; display: inline-flex; }
.ra-crumb { color: var(--muted); font-size: 13.5px; margin-bottom: 4px; }
.ra-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.ra-groups { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 12px; }
tr.ra-click { cursor: pointer; } tr.ra-click:hover td { background: var(--bg-soft); }
/* full-window remote session */
body.ra-session { overflow: hidden; }
body.ra-session .topbar { display: none; }
.ra-viewer { position: fixed; inset: 0; z-index: 40; background: #05080d; display: flex; flex-direction: column; }
.ra-viewer iframe { flex: 1; width: 100%; border: 0; background: #000; }
.ra-viewer .viewer-bar { display: flex; gap: 14px; align-items: center; padding: 8px 14px; background: var(--navy); color: #fff; }
.ra-viewer .viewer-bar .grow { flex: 1; }
.ra-viewer.viewer.dockview { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #05080d; }
/* floating dock for the remote desktop view (light theme, follows /theme.css) */
.viewer.dockview{position:relative;background:#05080d}
.viewer.dockview iframe{flex:1;border:0;border-radius:0}
.dock{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;max-height:calc(100% - 24px);overflow:visible;
  background:rgba(255,255,255,.95);border:1px solid var(--border-color);border-radius:14px;color:var(--text-color);box-shadow:0 8px 26px rgba(2,30,68,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .22s ease,opacity .22s ease;font-size:.85rem}
.dock.away{transform:translate(-160%,-50%);opacity:0;pointer-events:none}
/* the notch: a small strip on the left edge that is always visible; hover it (or move the pointer to the left edge) to bring the dock out */
.dock-hot{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:120px;z-index:8;border:0;padding:0;background:transparent;cursor:pointer}
.dock-hot::after{content:"";position:absolute;left:2px;top:50%;width:5px;height:56px;margin-top:-28px;border-radius:5px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(2,30,68,.35)}
.dock-hot:hover::after{background:#fff;height:72px;margin-top:-36px}
.dock-btn{width:34px;height:34px;padding:0;margin:0;line-height:0;font-size:0;display:inline-grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--text-color);cursor:pointer}
.dock-btn svg{display:block;width:18px;height:18px;margin:0}
/* the portal's global button rules (padding, blue hover) must not leak into the dock: they push the icon off-centre */
.dock .dock-btn:not(:disabled):hover{background:var(--background-color);color:var(--primary-color);border:0}
.dock-btn:focus-visible,.dock-hot:focus-visible,.dock-opt:focus-visible{outline:2px solid var(--accent-color);outline-offset:1px}
.dock-end{color:var(--danger-color)}.dock .dock-end:not(:disabled):hover{background:#fdecea;color:var(--danger-color)}
.dock-sep{width:22px;height:1px;margin:6px 0;background:var(--border-color)}
.dock-dot{width:9px;height:9px;border-radius:50%;margin:2px 0 4px;background:var(--warn-color);flex:none}
.dock-dot.live{background:var(--ok-color);box-shadow:0 0 0 3px rgba(21,128,61,.18)}
.dock-name{font-weight:600;font-size:.72rem;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.dock-clock,.dock-lat{margin-top:2px;font-size:.7rem;color:var(--muted-text-color);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.dock-note{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.96);border:1px solid var(--border-color);color:var(--primary-color);font-size:.78rem;white-space:nowrap}
.dock-note:empty{display:none}
.dock-pop{position:absolute;left:76px;top:50%;transform:translateY(-50%);z-index:9;min-width:200px;padding:8px;border-radius:12px;
  background:#fff;border:1px solid var(--border-color);color:var(--text-color);box-shadow:0 8px 26px rgba(2,30,68,.22)}
.dock-menu{display:grid;gap:4px}
.dock-opt{padding:8px 12px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.dock-opt:hover{background:var(--background-color);color:var(--primary-color)}
@media (max-height:520px){.dock-name,.dock-lat,.dock-clock{display:none}}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}

/* chat popup, bottom right */
.chat-pop{position:fixed;right:16px;bottom:16px;z-index:60;width:360px;height:480px;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px);display:flex;flex-direction:column;
  background:var(--surface-color);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 14px 40px rgba(2,30,68,.28);overflow:hidden}
.chat-pop.min{height:auto}
.chat-pop.min .chat-frame{display:none}
.chat-head{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--secondary-color);color:#fff;cursor:default}
.chat-grow{flex:1}
.chat-btn{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.chat-btn:hover{background:rgba(255,255,255,.18)}
.chat-btn:focus-visible{outline:2px solid #fff;outline-offset:1px}
.chat-frame{flex:1;width:100%;border:0;background:var(--background-color)}
@media (max-width:520px){.chat-pop{right:8px;bottom:8px;width:calc(100vw - 16px);height:70vh}}

/* own chat: messages and files */
.chat-status{font-size:.72rem;margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.5)}
.chat-status.on{background:rgba(61,220,132,.2)}
.chat-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--background-color)}
.cmsg{max-width:80%;padding:8px 12px;border-radius:14px;font-size:.9rem;line-height:1.4;word-wrap:break-word;display:flex;flex-direction:column;gap:2px}
.cmsg .meta{font-size:.68rem;opacity:.7}
.cmsg.out{align-self:flex-end;background:var(--primary-color);color:#fff;border-bottom-right-radius:4px}
.cmsg.in{align-self:flex-start;background:var(--surface-color);color:var(--text-color);border:1px solid var(--border-color);border-bottom-left-radius:4px}
.chat-file{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;border:1px dashed currentColor;border-radius:10px;padding:6px 10px}
.chat-file span{font-size:.72rem;opacity:.8}
.chat-note{min-height:0;padding:0 12px;font-size:.75rem;color:var(--danger-color)}
.chat-note:not(:empty){padding:4px 12px}
.chat-compose{display:flex;gap:6px;align-items:center;padding:10px 12px;background:var(--surface-color);border-top:1px solid var(--border-color)}
.chat-compose input[type=text]{flex:1;height:36px;padding:0 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--background-color);color:var(--text-color);font:inherit}
.chat-attach{width:36px;height:36px;border:1px solid var(--border-color);border-radius:10px;background:transparent;cursor:pointer;font-size:1.05rem}
.chat-attach:hover{background:var(--background-color)}
.chat-send{height:36px;padding:0 16px;border:0;border-radius:10px;background:var(--primary-color);color:#fff;font:inherit;font-weight:600;cursor:pointer}

.chat-compose input[type=text]{min-width:0;flex:1}.chat-compose button{flex:none;width:auto}.chat-compose .chat-attach{width:36px;padding:0}