/* Remote Desktop lab: the apps on the technician's PC, the session window,
   the customer's screen laid over it, and the banner on the customer's side.
   Built on win.css; only what is new lives here. */

/* drawn tool icons take the size of the text they replace */
.rd-svg { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; flex: none; }
.dicon .ic .rd-svg { width: 40px; height: 40px; }
.tb-btn .rd-svg { width: 22px; height: 22px; }
.titlebar .ti .rd-svg { width: 16px; height: 16px; vertical-align: -3px; }
.start .pin .ic .rd-svg { width: 28px; height: 28px; }
.toast .ti .rd-svg, .dlg .hd .rd-svg { width: 20px; height: 20px; }

/* app panes */
.rd-pane { font-size: 13px; }
.rd-pane h1 { font-size: 22px; } .rd-pane h1 small { margin-top: 2px; }
.rd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-content: start; }
.rd-pane input { width: 220px; }
.rd-notes { width: 100%; box-sizing: border-box; min-height: 80px; resize: vertical; background: var(--w-card2); color: var(--w-ink); border: 1px solid rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.4); border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 12.5px; }
.rd-pane .btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rd-pane .btns .rd-svg, .qr .rd-svg, .rs-b .rd-svg { width: 15px; height: 15px; vertical-align: -3px; }

/* Help Desk */
.rd-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rd-tbl th { text-align: left; font-weight: 600; color: var(--w-dim); padding: 6px 8px; border-bottom: 1px solid var(--w-sep); }
.rd-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--w-sep); vertical-align: top; }
.rd-tbl td small { display: block; color: var(--w-dim); font-size: 11px; margin-top: 2px; }
.rd-tbl tr[data-act] { cursor: pointer; } .rd-tbl tr[data-act]:hover td { background: rgba(255,255,255,.04); }
.pri, .st { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.p-urgent { background: rgba(196,43,28,.25); color: #ff9b8f; } .p-high { background: rgba(247,181,0,.2); color: #ffd166; } .p-normal { background: rgba(255,255,255,.08); color: var(--w-dim); }
.st-open { background: rgba(76,194,255,.16); color: var(--w-blue); } .st-prog { background: rgba(247,181,0,.18); color: #ffd166; } .st-done { background: rgba(48,209,88,.18); color: #8fe3a2; }

/* Teams chat */
.rd-chat { display: flex; flex: 1; min-width: 0; min-height: 0; background: var(--w-bg); }
.ch-list { width: 178px; flex: none; border-right: 1px solid var(--w-sep); overflow-y: auto; padding: 6px; }
.ch-p { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 6px; cursor: pointer; position: relative; }
.ch-p:hover { background: rgba(255,255,255,.05); } .ch-p.on { background: rgba(91,95,199,.25); }
.ch-p .av { width: 28px; height: 28px; border-radius: 50%; background: #5b5fc7; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.ch-p b { display: block; font-weight: 600; font-size: 12px; } .ch-p small { display: block; color: var(--w-dim); font-size: 10.5px; }
.ch-p i { position: absolute; right: 6px; top: 8px; font-style: normal; background: #c42b1c; color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; }
.ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 8px 11px; border-radius: 10px; background: var(--w-card2); font-size: 12.5px; line-height: 1.45; align-self: flex-start; }
.msg.me { align-self: flex-end; background: #444791; color: #fff; }
.ch-replies { border-top: 1px solid var(--w-sep); padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 46%; overflow-y: auto; }
.qr { text-align: left; border: 1px solid rgba(91,95,199,.55); background: rgba(91,95,199,.12); color: var(--w-ink); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.qr:hover { background: rgba(91,95,199,.28); }

/* Quick Assist */
.qa-code { font-size: 40px; font-weight: 600; letter-spacing: .28em; margin: 10px 0 6px; font-family: 'Cascadia Mono', Consolas, monospace; }

/* the session window */
.rs-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #1b1b1b; }
.rs-bar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: #2b2b2b; border-bottom: 1px solid var(--w-sep); flex-wrap: wrap; position: relative; z-index: 3; }
.rs-bar .sp { flex: 1; }
.rs-b { border: 0; background: transparent; color: var(--w-ink); font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 4px; cursor: pointer; }
.rs-b:hover { background: rgba(255,255,255,.09); }
.rs-bar .rs-b[data-act="rd-end"] { background: #c42b1c; color: #fff; }
.rs-tag { font-size: 11.5px; padding: 3px 8px; border-radius: 10px; } .rs-tag.good { background: rgba(48,209,88,.18); color: #8fe3a2; }
.rs-grp { position: relative; }
.rs-menu { position: absolute; left: 0; top: 100%; margin-top: 4px; background: #2c2c2c; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 4px; min-width: 220px; z-index: 5; }
.rs-menu .it { padding: 7px 10px; border-radius: 4px; font-size: 12.5px; cursor: pointer; } .rs-menu .it:hover { background: rgba(255,255,255,.08); }
.rs-stage { flex: 1; min-height: 0; background: #000; position: relative; display: flex; align-items: center; justify-content: center; }
.rs-ph { color: #777; font-size: 12px; }
.rs-status { font-size: 11px; color: var(--w-dim); padding: 4px 10px; background: #232323; border-top: 1px solid var(--w-sep); }
.rs-status .bad { color: #ff8a80; font-weight: 600; }

/* the customer's screen and what lies over it (outside the scaled screen) */
.rd-frame { position: absolute; border: 0; z-index: 6; background: #000; }
.rd-frame.lag { filter: blur(1.1px) saturate(.75); }
.rd-cover { position: absolute; z-index: 7; display: none; font-family: 'Segoe UI', system-ui, sans-serif; direction: ltr; text-align: left; }
.rd-viewonly { position: absolute; inset: 0; cursor: not-allowed; display: flex; align-items: flex-start; justify-content: center; }
.rd-viewonly span { margin-top: 13%; background: rgba(0,0,0,.78); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 6px; }
.rd-mon2 { position: absolute; inset: 0; background: linear-gradient(135deg, #0f2a4a, #1d4e7e); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.rd-mon2 .t { position: absolute; top: 10px; left: 12px; font-size: 12px; opacity: .8; }
.rd-mon2 .teamsfake { background: rgba(0,0,0,.35); border-radius: 10px; padding: 14px 18px; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.rd-mon2 .teamsfake .rd-svg { width: 30px; height: 30px; } .rd-mon2 .teamsfake span { opacity: .75; font-size: 12px; }
.rd-mon2 .hint { font-size: 12px; background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 6px; }
.rd-wait { position: absolute; inset: 0; background: rgba(0,0,0,.82); color: #ddd; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; font-size: 13px; }
.rd-wait .spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #4cc2ff; animation: rdspin .9s linear infinite; }
@keyframes rdspin { to { transform: rotate(360deg); } }
.rd-badge { position: absolute; top: 8px; right: 8px; font-size: 11.5px; padding: 4px 9px; border-radius: 6px; background: rgba(0,0,0,.75); color: #fff; }
.rd-badge.bad { color: #ffb4ab; } .rd-badge.rec { top: auto; bottom: 8px; color: #ff5f57; font-weight: 600; }

/* on the customer's PC: someone is connected */
.rd-banner { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 9000; background: #1f6f3a; color: #fff; font-size: 12.5px; padding: 6px 8px 6px 12px; border-radius: 0 0 10px 10px; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.rd-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: #7dffa8; box-shadow: 0 0 6px #7dffa8; }
.rd-banner .btn { padding: 3px 12px; }

/* the lab sheet's ticket headings */
.task-sec { margin: 14px 0 2px; font-size: .74rem; font-weight: 650; letter-spacing: .02em; color: var(--ink-dim); text-transform: uppercase; }
html[dir="rtl"] .task-sec { direction: ltr; text-align: right; }
.task-sec { display: flow-root; }
.task-redo { float: right; margin: -4px 0 0 8px; background: transparent; border: 1px solid var(--line); color: var(--ink-dim); border-radius: 980px; padding: 3px 10px; font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
.task-redo:hover { color: var(--ink); border-color: rgba(255,255,255,.25); }
.task-redo.armed { color: #fff; background: #b3261e; border-color: #b3261e; }
html[dir="rtl"] .task-redo { float: left; margin: -4px 8px 0 0; }

/* the customer's page: just the screen, filling its frame */
body.rd-cust { margin: 0 !important; padding: 0 !important; background: #000 !important; overflow: hidden; }
body.rd-cust .screenwrap { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

/* twelve desktop icons wrap into a second column instead of running under the taskbar */
.desk-icons { flex-wrap: wrap; max-height: 630px; align-content: flex-start; column-gap: 4px; }

/* path chips are English: they take their direction from their own text */
.task .tx .path { unicode-bidi: plaintext; }

/* the Teams chat in two languages: English, then Arabic beneath */
.msg .en, .qr .en { display: block; }
.msg .ar, .qr .ar { display: block; direction: rtl; text-align: right; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.65; font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif; }
.msg.me .ar { border-top-color: rgba(255,255,255,.3); }
.qr .ar { opacity: .92; }
.ch-replies .note .ar { display: inline; border: 0; margin: 0 0 0 8px; padding: 0; }

/* the Teams chat can be copied: selectable text and a Copy button per message */
.ch-msgs .msg { position: relative; user-select: text; -webkit-user-select: text; cursor: text; padding-bottom: 22px; }
.ch-msgs .msg * { user-select: text; -webkit-user-select: text; }
.ch-msgs .msg .msg-copy { position: absolute; right: 6px; bottom: 3px; border: 0; border-radius: 6px; padding: 1px 7px; font: 600 10.5px 'Segoe UI', sans-serif; color: inherit; background: rgba(255,255,255,.12); opacity: .55; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ch-msgs .msg:hover .msg-copy, .ch-msgs .msg .msg-copy:focus { opacity: 1; }
.ch-msgs .msg .msg-copy:hover { background: rgba(255,255,255,.24); }

/* resolution notes come filled in, English then Arabic: each line takes its own direction */
.rd-notes { unicode-bidi: plaintext; min-height: 150px; }