/* RemoteAssist — due facce dello stesso prodotto. - Console (predefinita): le pagine del TECNICO (master, viewer, account). Nera, densa, monospaziata dove ci sono dati: si guarda tutto il giorno e deve stare in una schermata. - Chiara (): le pagine del CLIENTE (host, device). Le guarda chi ha appena chiamato perché qualcosa non funziona: deve rassicurare, non sembrare un terminale. I nomi dei token non cambiano tra le due: le pagine restano le stesse, cambia la palette. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --bg: #0A0B0C; --panel: #101113; --raised: #15171A; --line: #1C1E21; --border: #232629; --input-bg: #121315; --fg: #E6E7E9; --muted: #8A8F98; --dim: #64696F; --accent: #6EE7A8; --on-accent: #08130D; --accent-soft: #123023; --accent-line: #2E6B4D; --link: #6EE7A8; --ok: #6EE7A8; --warn: #F6C453; --err: #FF6B6B; --danger: #C0303D; --on-danger: #FFFFFF; --r: 8px; --r-lg: 11px; } /* Le pagine del cliente: stessa struttura, palette opposta. */ body.client { --bg: #F6F4EF; --panel: #FFFFFF; --raised: #FBFAF7; --line: #E8E5DE; --border: #E2DFD7; --input-bg: #FFFFFF; --fg: #16181C; --muted: #5C6370; --dim: #6B7280; --accent: #1F5F4B; --on-accent: #FFFFFF; --accent-soft: #EDF2EF; --accent-line: #C6DACF; --link: #1F5F4B; --ok: #1F8A5F; --warn: #A8611A; --err: #C0303D; --r: 10px; --r-lg: 16px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--sans); min-height: 100vh; } .wrap { max-width: 560px; margin: 0 auto; padding: 48px 20px; } h1 { font-size: 1.5rem; margin: 0 0 6px; letter-spacing: -.015em; } .sub { color: var(--muted); margin: 0 0 32px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; } button { font: 600 inherit; font-family: var(--sans); padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent; background: var(--accent); color: var(--on-accent); cursor: pointer; } button:hover { filter: brightness(1.08); } button:disabled { opacity: .45; cursor: not-allowed; filter: none; } button.ghost { background: transparent; border-color: var(--border); color: var(--fg); font-weight: 500; } button.ghost:hover { border-color: var(--muted); filter: none; } button.danger { background: var(--danger); color: var(--on-danger); border-color: transparent; } button.on { background: var(--accent); color: var(--on-accent); border-color: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input, textarea { font: inherit; font-family: var(--sans); padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); width: 100%; } input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* Il codice: è l'unica cosa che il cliente deve leggere al telefono, quindi è grande. */ .code { /* Mai su due righe: il cliente lo detta al telefono. La dimensione segue la larghezza dello schermo, così "123 456 789" ci sta intero anche su un telefono. */ font: 700 clamp(1.9rem, 10vw, 3.4rem)/1.05 var(--mono); white-space: nowrap; letter-spacing: .04em; text-align: center; color: var(--accent); margin: 10px 0 4px; user-select: all; } .mono { font-family: var(--mono); } .status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex-shrink: 0; } .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.err { background: var(--err); } .row { display: flex; gap: 10px; align-items: center; } .spacer { flex: 1; } .hidden { display: none !important; } /* etichetta che serve solo a chi usa un lettore di schermo */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .note { font-size: .87rem; color: var(--muted); border-left: 2px solid var(--border); padding-left: 12px; margin-top: 18px; } a { color: var(--link); } /* --- console del tecnico (master) ------------------------------------------ */ .app { display: flex; min-height: 100vh; } .rail { width: 60px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .rail .mark { width: 30px; height: 30px; border-radius: var(--r); background: var(--accent); display: grid; place-items: center; color: var(--on-accent); margin-bottom: 8px; } .rail a, .rail button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: var(--r); background: transparent; border: 0; color: var(--muted); cursor: pointer; } .rail a:hover, .rail button:hover { color: var(--fg); background: var(--raised); filter: none; } .rail a.sel { background: var(--raised); color: var(--accent); } .console { flex: 1; display: flex; flex-direction: column; min-width: 0; } .cmdbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--line); } .cmdbar .tag { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .cmdbar input { width: 240px; height: 34px; padding: 0 12px; font: 400 .82rem var(--mono); } .cmdbar button { height: 34px; padding: 0 14px; font-size: .82rem; } .key { font: 400 .7rem/1 var(--mono); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; } .histbox { margin: 16px 18px 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 15px 17px; } .histbox .hhead { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } .histbox .hrow { display: flex; gap: 18px; font: 400 .8rem/1.9 var(--mono); } .histbox .hrow .when { color: var(--muted); width: 118px; flex-shrink: 0; } .histbox .hrow .dur { width: 92px; flex-shrink: 0; } .histbox .hrow .who { color: var(--fg); } .keybar { margin-top: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 9px 18px; border-top: 1px solid var(--line); background: var(--panel); font: 400 .72rem/1.6 var(--mono); color: var(--muted); } /* --- pagine del cliente ------------------------------------------------------ */ .client-head { display: flex; align-items: center; gap: 10px; padding: 16px 28px; border-bottom: 1px solid var(--line); } .client-head .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: var(--on-accent); } /* La barra di stato del cliente sta sempre in fondo allo schermo, come la striscia rossa. */ #dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; } #dock > * { margin: 0; border-radius: 0; border-width: 1px 0 0; } .dockbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 28px; background: var(--panel); border-top: 1px solid var(--border); } .dockbar.live { background: #FCF1F1; border-top-color: #E8D2D2; } .dockbar.live .who { color: #7A1D25; font-weight: 600; } .chips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .chips li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; line-height: 1.5; } .chips svg { flex-shrink: 0; margin-top: 3px; color: var(--ok); } /* Il colore lo mette il pallino dentro (attesa, ok, errore): la pillola resta neutra. */ .pill-wait { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 99px; background: var(--raised); border: 1px solid var(--border); color: var(--fg); font-size: .85rem; } /* --- viewer a schermo intero --- Barra e pannelli seguono il tema della pagina: con colori scuri fissi, sul tema chiaro pulsanti e caselle (che usano le variabili) sparivano scuro su scuro. */ .stage { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; } .stage video { flex: 1; width: 100%; height: 100%; object-fit: contain; min-height: 0; } .bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--fg); } .bar .spacer { flex: 1; } .pill { font: 400 .76rem var(--mono); padding: 4px 10px; border-radius: 99px; background: var(--raised); border: 1px solid var(--border); color: var(--muted); } /* --- chat --- */ .chat { display: flex; flex-direction: column; min-height: 0; } .chat-list { flex: 1; overflow-y: auto; min-height: 120px; max-height: 320px; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; } .chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: .92rem; } .chat-msg.theirs { background: var(--raised); border: 1px solid var(--border); align-self: flex-start; } .chat-msg.mine { background: var(--accent); color: var(--on-accent); align-self: flex-end; } .chat-msg.mine a { color: var(--on-accent); } .chat-who { display: block; font-size: .72rem; opacity: .7; margin-bottom: 2px; } .chat-text { white-space: pre-wrap; overflow-wrap: anywhere; } .chat-note { align-self: center; font-size: .78rem; color: var(--muted); } .chat-form { display: flex; gap: 8px; } .chat-input { flex: 1; resize: none; height: 44px; } .badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 99px; background: var(--err); color: #fff; font-size: .72rem; line-height: 18px; } /* pannello chat del tecnico, a destra del video */ .stage-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } .stage-body video { flex: 1; min-width: 0; width: auto; } .chat-panel { width: 320px; flex-shrink: 0; /* senza, il video lo schiaccia fino a zero */ background: var(--panel); border-left: 1px solid var(--line); color: var(--fg); padding: 12px; display: flex; flex-direction: column; } .chat-panel .chat-list { max-height: none; } /* --- schermi stretti --------------------------------------------------------- */ @media (max-width: 900px) { .keybar { display: none; } .rail { flex-direction: row; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .app { flex-direction: column; } } @media (max-width: 760px) { .stage-body { position: relative; } .chat-panel { width: auto; position: absolute; inset: 0; z-index: 1; } .bar { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; } .bar button { padding: 8px 12px; } .bar .pill { font-size: .7rem; padding: 3px 8px; } /* il dito controlla il cursore: il browser non deve scrollare o zoomare */ .stage video { touch-action: none; } }