/* ── Chat header button (state of the session with the person in this chat) ── */
.remote-chat-connect { flex: 0 0 auto; margin-left: 12px; padding: 7px 11px; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.remote-chat-connect[hidden] { display: none; }
.remote-chat-connect.is-pending { color: #d9a400; border-color: #d9a400; }
.remote-chat-connect.is-active { color: #ff5b63; border-color: #ff5b63; }
.remote-chat-connect:disabled { opacity: .45; cursor: not-allowed; }

/* ── Status strips below the chat header: they push the chat down, never cover it ── */
.remote-strips { display: flex; flex-direction: column; flex: 0 0 auto; }
.remote-strips[hidden] { display: none; }
.remote-strip { display: flex; align-items: center; gap: 10px; padding: 7px 20px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); background: rgba(255, 57, 69, .10); color: var(--text); }
.remote-strip::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff3945; box-shadow: 0 0 8px #ff3945; }
.remote-strip.is-outgoing { background: rgba(24, 225, 210, .08); }
.remote-strip.is-outgoing::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.remote-strip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-strip button { flex: 0 0 auto; padding: 4px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.remote-strip button:last-child { color: #fff; background: #a52b35; border-color: #c6424b; }

.remote-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1300; max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; background: #333; color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* ── Incoming request prompt (chat page) ── */
.remote-modal[hidden], .remote-modal [hidden] { display: none; }
.remote-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.remote-modal-card { width: min(520px,100%); max-height: min(92vh,820px); overflow: auto; padding: 24px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.remote-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.remote-modal h3 { margin: 6px 0 0; font-size: 20px; }
.remote-modal p { color: var(--muted); line-height: 1.5; }
.remote-actions { display: flex; align-items: center; gap: 12px; }
.remote-primary, .remote-secondary, .remote-danger { min-height: 40px; padding: 0 15px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.remote-primary { color: var(--bg); background: var(--accent); border: 1px solid var(--accent); }
.remote-secondary { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); }
.remote-danger { color: #fff; background: #a52b35; border: 1px solid #c6424b; }

/* ── Viewer window (remote-viewer.html): one window per remote screen ── */
body.remote-viewer-page { margin: 0; height: 100vh; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, sans-serif; }
.rv-shell { display: flex; flex-direction: column; height: 100vh; }
.rv-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.rv-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rv-heading strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-status { color: var(--muted); font-size: 13px; }
.rv-status.is-error { color: var(--danger, #ff5b63); }
.rv-actions { display: flex; align-items: center; gap: 10px; }
/* One button per PC, shown only where there is more than one to choose
   between. Deliberately plainer than the screen buttons next to it: these are
   not another view of the same thing, so they should not look like a set with
   them. The divider is what says so. */
.rv-pcs { display: flex; align-items: center; gap: 6px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--border); }
.rv-pcs[hidden] { display: none; }
.rv-pc-btn {
  min-width: 44px; padding: 6px 10px;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  /* "PC 1" is two words and the button is narrow, so without this it breaks
     across two lines and the row of buttons grows a line taller than the rest
     of the toolbar. */
  white-space: nowrap;
}
.rv-pc-btn:hover:not(:disabled) { color: var(--text); }
.rv-pc-btn.is-active {
  color: var(--text); border-color: var(--accent, #18e1d2);
  background: color-mix(in srgb, var(--accent, #18e1d2) 16%, var(--panel-2));
}
.rv-pc-btn:disabled { opacity: .5; cursor: progress; }

/* One button per screen instead of a dropdown: which screens exist, and which
   one is being watched, are both readable without opening anything. */
.rv-displays { display: flex; align-items: center; gap: 6px; }
.rv-displays[hidden] { display: none; }
.rv-display-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 44px; padding: 4px 8px 3px;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; cursor: pointer; line-height: 1;
}
.rv-display-btn:hover { color: var(--text); }
.rv-display-btn.is-active {
  color: var(--text); border-color: var(--accent, #18e1d2);
  background: color-mix(in srgb, var(--accent, #18e1d2) 16%, var(--panel-2));
}
/* The screen itself: a rectangle on a stand, drawn rather than an icon font so
   it cannot arrive as a missing glyph. */
.rv-display-icon {
  width: 18px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px;
  position: relative;
}
.rv-display-icon::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 8px; height: 1.5px; background: currentColor; transform: translateX(-50%);
}
.rv-display-num { font-size: 10px; font-weight: 700; }
/* The explicit tracks matter. With only `display: grid; place-items: center`
   the single implicit row is sized to its content, so the video's `height:100%`
   below is cyclic and falls back to the stream's own height — a 1080p screen in
   a 705px-tall stage became a 720px-tall element, and `overflow: hidden` cut the
   last 15 px off the bottom of the remote desktop, taskbar included. A definite
   track makes the percentage resolve against the stage instead. */
.remote-video-wrap { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; background: #05080b; outline: none; }
.rv-stage { flex: 1 1 auto; min-height: 0; }
.remote-video-wrap video, .remote-video-wrap #remote-img-preview { width: 100%; height: 100%; object-fit: contain; }
/* Stretched: the remote screen at its real size, which is usually bigger than
   the window, so the stage scrolls instead of shrinking it. Worth it when the
   browser is sharing the screen with something else and a whole desktop
   squeezed into half a window is too small to read. `start` rather than
   `center` so the top-left corner is where scrolling begins; centring would
   push the picture off the top once it is taller than the stage. */
.remote-video-wrap.is-stretched { overflow: auto; place-items: start; }
/* The size itself is set from the stream's own width and height in JS: a
   <video> with no frames yet has no real size of its own and would collapse
   to the 300x150 default, which is what pressing this before the picture
   arrived used to give. */
.remote-video-wrap.is-stretched video, .remote-video-wrap.is-stretched #remote-img-preview {
  max-width: none; max-height: none; object-fit: fill; flex: none;
}
.remote-video-wrap.is-stretched #remote-img-preview { position: static; }
.remote-video-wrap.is-stretched::-webkit-scrollbar { width: 14px; height: 14px; }
.remote-video-wrap.is-stretched::-webkit-scrollbar-track { background: #0b0f14; }
.remote-video-wrap.is-stretched::-webkit-scrollbar-thumb { background: #39434f; border-radius: 7px; border: 3px solid #0b0f14; }
.remote-video-wrap.is-stretched::-webkit-scrollbar-thumb:hover { background: #4b5765; }
.rv-fitmode { min-width: 118px; }
.remote-video-wrap #remote-img-preview { position: absolute; inset: 0; }
.remote-video-wrap:fullscreen { width: 100vw; height: 100vh; background: #000; }
.rv-placeholder { position: absolute; padding: 0 24px; text-align: center; color: var(--muted); font-size: 15px; }
.rv-note { flex: 0 0 auto; padding: 8px 16px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--border); font-size: 12px; line-height: 1.45; }
.rv-click-ripple { position: fixed; z-index: 99999; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; background: rgba(0, 150, 255, .5); border: 2px solid rgba(0, 150, 255, .8); transition: transform .3s ease-out, opacity .3s ease-out; }

@media (max-width: 768px) {
  .remote-chat-connect { margin-left: 8px; padding: 6px 8px; font-size: 11px; }
  .remote-strip { padding: 7px 12px; }
  .remote-modal { align-items: end; padding: 0; }
  .remote-modal-card { max-height: 92dvh; padding: 20px 16px calc(18px + env(safe-area-inset-bottom,0px)); border-radius: 20px 20px 0 0; }
  .rv-actions { width: 100%; }
  .rv-actions > button { flex: 1; }
}