/* Remote Browser — saffron on deep ink (dark) / warm paper (light). WCAG AA+ on all text pairs. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --primary: #f4b740; --on-primary: #2a1d00; --primary-cont: #4a3708; --on-primary-cont: #ffdf9e;
  --secondary: #9fd4a6; --on-secondary: #08381a;
  --bg: #111318; --surface: #1a1c22; --surface-hi: #24272e; --surface-top: #2e313a;
  --on-surface: #e9e7ee; --muted: #b3b0ba; --outline: #3d404a;
  --error: #ffb4ab; --error-cont: #5c1912; --success: #9fd4a6;
  --radius: 16px; --ease: cubic-bezier(.2, 0, 0, 1);
  font-family: system-ui, "Noto Sans", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --primary: #7a5900; --on-primary: #fff; --primary-cont: #ffdf9e; --on-primary-cont: #261a00;
    --secondary: #2f6b3c; --on-secondary: #fff;
    --bg: #fbf8f2; --surface: #f3efe7; --surface-hi: #ebe6dc; --surface-top: #e2dccf;
    --on-surface: #1d1b16; --muted: #4d4639; --outline: #cfc6b4;
    --error: #ba1a1a; --error-cont: #ffdad6; --success: #2f6b3c;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--on-surface); font-size: 15px; line-height: 1.55; }
.muted { color: var(--muted); }

.btn { font: inherit; border: 0; border-radius: 999px; padding: .55em 1.1em; cursor: pointer;
  transition: background-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease); }
.btn:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn.primary:hover { box-shadow: 0 2px 10px rgb(244 183 64 / .35); }
.btn.tonal { background: var(--primary-cont); color: var(--on-primary-cont); }
.btn.tonal[aria-pressed="true"] { background: var(--secondary); color: var(--on-secondary); }
.btn.ghost { background: transparent; color: var(--on-surface); border: 1px solid var(--outline); }
.btn.ghost:hover, .btn.icon:hover { background: var(--surface-top); }
.btn.icon { background: transparent; color: var(--on-surface); width: 2.4em; height: 2.4em; padding: 0; font-size: 1.05em; }
.btn.wide { width: 100%; padding: .8em; }

.brand { white-space: nowrap; display: flex; align-items: center; gap: .55em; font-weight: 700; letter-spacing: .01em; }
.brand-dot { width: .7em; height: .7em; border-radius: 50%; background: var(--muted); transition: background-color .3s; }
.brand-dot.on { background: var(--success); box-shadow: 0 0 0 4px rgb(159 212 166 / .18); }

/* sign-in */
.login-body { display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(60rem 40rem at 80% -10%, var(--primary-cont), transparent 60%), var(--bg); }
.login-card { width: min(380px, 100%); background: var(--surface); border-radius: 28px; padding: 2rem;
  box-shadow: 0 12px 40px rgb(0 0 0 / .28); }
.login-card h1 { margin: 1.2rem 0 .2rem; font-size: 1.6rem; }
.field { display: grid; gap: .35rem; margin: 1.4rem 0 1rem; }
.field input, .ask input, textarea { font: inherit; color: var(--on-surface); background: var(--surface-hi);
  border: 1px solid var(--outline); border-radius: 12px; padding: .7em .9em; width: 100%; }
.error { color: var(--error); min-height: 1.4em; margin: .8rem 0 0; }

/* main */
body:not(.login-body) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 1rem; padding: calc(.5rem + var(--safe-top)) max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); background: var(--surface);
  border-bottom: 1px solid var(--outline); flex: none; }
.status { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status b { color: var(--on-surface); font-weight: 600; }
.bar-actions { display: flex; gap: .35rem; align-items: center; }
.layout { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.screen-wrap { position: relative; background: #000; min-height: 0; min-width: 0; }
#screen { position: absolute; inset: 0; }
.banner { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%);
  background: var(--secondary); color: var(--on-secondary); padding: .4em 1.1em; border-radius: 999px;
  font-weight: 600; box-shadow: 0 4px 16px rgb(0 0 0 / .4); pointer-events: none; }

.chat { display: flex; flex-direction: column; background: var(--surface); min-height: 0;
  border-left: 1px solid var(--outline); }
.chat-head { display: flex; justify-content: space-between; padding: .8rem 1rem; font-weight: 600;
  border-bottom: 1px solid var(--outline); }
.lock { font-weight: 400; font-size: .85em; color: var(--success); }
.msgs { list-style: none; margin: 0; padding: 1rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 88%; padding: .55em .9em; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
  animation: pop .22s var(--ease); }
.msg.claude { align-self: flex-start; background: var(--surface-top); border-start-start-radius: 6px; }
.msg.owner { align-self: flex-end; background: var(--primary-cont); color: var(--on-primary-cont); border-start-end-radius: 6px; }
.msg.q { border: 2px solid var(--primary); }
.msg .meta { display: block; font-size: .75em; color: var(--muted); margin-top: .2em; }
.msg.owner .meta { color: inherit; opacity: .8; }
.empty { color: var(--muted); text-align: center; margin: auto; padding: 2rem; }

.ask { margin: 0 .8rem .6rem; padding: .9rem; border-radius: var(--radius); background: var(--primary-cont);
  color: var(--on-primary-cont); display: grid; gap: .6rem; animation: pop .25s var(--ease); }
.ask .q-title { font-weight: 700; }
.ask .hint { font-size: .82em; opacity: .9; }
.ask .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ask label.chk { display: flex; gap: .4em; align-items: center; font-size: .9em; }
.composer { display: flex; gap: .5rem; padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--outline); }
.composer textarea { resize: none; max-height: 8em; border-radius: 22px; }

@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.attention { animation: pulse 1.2s var(--ease) 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgb(244 183 64 / .35); } }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .screen-wrap { height: min(calc(100vw * .625 + var(--tb)), 62dvh); }
  .chat { border-left: 0; border-top: 1px solid var(--outline); }
  .status, .brand-name { display: none; }
  .bar { padding: calc(.4rem + var(--safe-top)) .6rem .4rem; gap: .4rem; } .bar .brand { flex: 1; }
  .bar-actions { gap: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* password eye */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-inline-end: 2.8em; }
.eye { position: absolute; inset-inline-end: .3em; top: 50%; transform: translateY(-50%); width: 2.3em; height: 2.3em;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease); }
.eye:hover { background: var(--surface-top); color: var(--on-surface); }
.eye[aria-pressed="true"] { color: var(--primary); }
.eye:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.pw-wrap input[dir="ltr"] ~ .eye { inset-inline-end: auto; right: .3em; }
.pw-wrap input[dir="ltr"] { padding-inline-end: .9em; padding-right: 2.8em; }

/* change-password dialog */
.dlg { border: 0; border-radius: 28px; padding: 1.6rem; width: min(400px, calc(100vw - 2rem));
  background: var(--surface); color: var(--on-surface); box-shadow: 0 16px 48px rgb(0 0 0 / .4); }
.dlg::backdrop { background: rgb(0 0 0 / .55); }
.dlg h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.dlg .field { margin: .9rem 0 0; }
.dlg .hint { font-size: .85em; margin: .9rem 0 0; }
.row.end { display: flex; gap: .5rem; justify-content: flex-end; }

/* fullscreen / focus mode: only the remote screen, edge to edge */
body.fs .bar, body.fs .chat { display: none; }
body.fs .layout { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.fs .screen-wrap { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.fs-exit { display: none; position: absolute; z-index: 5; top: calc(.6rem + var(--safe-top));
  right: calc(.6rem + env(safe-area-inset-right)); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0;
  background: rgb(20 20 24 / .55); color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .55;
  backdrop-filter: blur(6px); transition: opacity .18s var(--ease), transform .12s var(--ease); }
.fs-exit:hover, .fs-exit:focus-visible { opacity: 1; }
.fs-exit:active { transform: scale(.94); }
body.fs .fs-exit { display: grid; place-items: center; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 2rem)); background: var(--surface-top); color: var(--on-surface);
  padding: .8em 1.1em; border-radius: 14px; box-shadow: 0 8px 28px rgb(0 0 0 / .45); animation: pop .25s var(--ease); }
[hidden] { display: none !important; }

/* bottom tabs: touchpad / chat */
.chat-head { align-items: center; padding: .5rem .8rem; }
.seg { display: inline-flex; background: var(--surface-hi); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { font: inherit; border: 0; background: transparent; color: var(--muted); padding: .4em .95em;
  border-radius: 999px; cursor: pointer; position: relative; transition: background-color .18s var(--ease), color .18s var(--ease); }
.seg button[aria-selected="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.badge { position: absolute; top: -2px; right: -2px; min-width: .9em; height: .9em; border-radius: 50%; background: var(--error); }
.pad { flex: 1; margin: .7rem .8rem .4rem; border-radius: 22px; position: relative; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: linear-gradient(160deg, var(--surface-hi), var(--surface-top)); border: 1px solid var(--outline);
  box-shadow: inset 0 1px 8px rgb(0 0 0 / .12); display: grid; place-items: center; min-height: 140px; }
.pad-hint { color: var(--muted); font-size: .82em; text-align: center; line-height: 1.9; pointer-events: none; padding: 1rem; }
.pad::after, .fs-pad::after { content: attr(data-hint); position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--on-primary); font-size: .8em; font-weight: 600; padding: .2em .8em;
  border-radius: 999px; opacity: 0; pointer-events: none; }
.pad.flash::after, .fs-pad.flash::after { animation: hint .9s var(--ease); }
@keyframes hint { 10%, 60% { opacity: 1; } 100% { opacity: 0; } }
.pad-keys { display: flex; gap: .4rem; padding: 0 .8rem .7rem; align-items: center; position: relative; flex-wrap: wrap; }
.pad-keys .btn.ghost { min-width: 2.8em; padding: .5em .7em; }
.kbd-in { position: fixed; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; font-size: 16px; pointer-events: none;
  border: 0; padding: 0; caret-color: transparent; }
body.pad-mode .composer, body.pad-mode .msgs { display: none; }

/* local cursor over the remote screen */
.rcursor { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
.screen-wrap { overflow: hidden; }
@media (hover: hover) { .screen-wrap:hover .rcursor { display: none; } #screen canvas { cursor: default !important; } }
.btn { white-space: nowrap; }

/* fullscreen: the whole screen is a touchpad (the pointer stays put; your finger moves it) */
.fs-pad { display: none; position: absolute; inset: 0; z-index: 2; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; }
.fs-tools { display: none; position: absolute; z-index: 5; top: calc(3.8rem + var(--safe-top));
  right: calc(.6rem + env(safe-area-inset-right)); flex-direction: column; gap: .5rem; }
.fs-btn { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgb(20 20 24 / .55); color: #fff; font-size: 1.05rem; cursor: pointer; opacity: .55;
  backdrop-filter: blur(6px); transition: opacity .18s var(--ease), background-color .18s var(--ease); }
.fs-btn:hover, .fs-btn:focus-visible, .fs-btn[aria-pressed="true"] { opacity: 1; }
body.fs .fs-pad { display: block; }
body.fs .fs-tools { display: flex; }
body.fs .layout { grid-template-rows: 1fr; }
body.fs .screen-wrap { aspect-ratio: auto; max-height: none; height: 100%; }

/* loading scene */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg);
  transition: opacity .45s var(--ease); }
.splash.gone { opacity: 0; pointer-events: none; }
.scene { width: min(420px, 86vw); overflow: visible; }
.scene .ground { stroke: var(--outline); stroke-width: 1.5; stroke-linecap: round; }
.scene .person { fill: none; stroke: var(--on-surface); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.scene .person circle { fill: var(--on-surface); stroke: none; }
.scene .arm { transform-origin: 40px 74px; animation: throw .45s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes throw { from { transform: rotate(150deg); } to { transform: rotate(0); } }
.scene .lid { fill: #2b2e36; }
.scene .base { fill: #8b8f99; }
.scene .shine { fill: #fff; opacity: .14; }
.scene .stone path { fill: #7d7f86; stroke: #4c4e55; stroke-width: 1; stroke-linejoin: round; }
.scene .stone .stone-hi { fill: #b9bbc2; stroke: none; }
.scene .cracks { fill: none; stroke: #f4f8ff; stroke-width: 1.3; stroke-linecap: round; opacity: 0; }
.scene .cracks path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.scene .shards path { fill: #cfe6ff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.splash.hit .stone { opacity: 0; transition: opacity .1s; }
.splash.hit .glass { animation: flash .35s ease-out; }
@keyframes flash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.splash.hit .cracks { opacity: 1; }
.splash.hit .cracks path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease-out; }
.splash.hit .shards path { animation: shard .75s cubic-bezier(.2, .6, .4, 1) forwards; }
.splash.hit .shards path:nth-child(1) { --dx: 22px; --dy: 30px; --r: 160deg; }
.splash.hit .shards path:nth-child(2) { --dx: 34px; --dy: 18px; --r: -120deg; }
.splash.hit .shards path:nth-child(3) { --dx: -6px; --dy: 40px; --r: 200deg; }
.splash.hit .shards path:nth-child(4) { --dx: 40px; --dy: 4px; --r: -220deg; }
.splash.hit .shards path:nth-child(5) { --dx: 12px; --dy: 44px; --r: 90deg; }
@keyframes shard { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .splash.hit .cracks path { transition: none; } }

/* taskbar under the remote screen */
.screen-wrap { --tb: 40px; }
#screen, .fs-pad { bottom: var(--tb) !important; }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb); z-index: 4; display: flex; gap: .35rem;
  align-items: center; padding: 0 .4rem calc(env(safe-area-inset-bottom) * 0); background: rgb(18 19 24 / .92);
  border-top: 1px solid rgb(255 255 255 / .08); }
.tb-new, .tb-item { flex: none; display: inline-flex; align-items: center; gap: .35em; height: 30px; padding: 0 .7em;
  border: 0; border-radius: 8px; font: inherit; font-size: .8rem; color: #e9e7ee; background: rgb(255 255 255 / .07);
  cursor: pointer; transition: background-color .15s var(--ease), opacity .15s var(--ease), transform .1s var(--ease); }
.tb-new { color: var(--on-primary); background: var(--primary); font-weight: 600; }
.tb-new span { white-space: nowrap; }
.tb-items { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.tb-items::-webkit-scrollbar { display: none; }
.tb-item span { max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-item:hover { background: rgb(255 255 255 / .14); }
.tb-item:active, .tb-new:active { transform: scale(.96); }
.tb-item.active { background: rgb(244 183 64 / .22); box-shadow: inset 0 -2px 0 var(--primary); }
.tb-item.min { opacity: .6; font-style: italic; }
.tb-empty { color: #b3b0ba; font-size: .8rem; padding: 0 .4em; }
.tb-menu { position: absolute; bottom: calc(var(--tb) + 6px); z-index: 6; min-width: 200px; max-width: 280px;
  background: var(--surface); color: var(--on-surface); border-radius: 14px; padding: .35rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / .45); display: grid; animation: pop .18s var(--ease); }
.tb-menu-title { font-size: .78rem; color: var(--muted); padding: .35rem .6rem .45rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tb-menu button { font: inherit; text-align: start; border: 0; background: transparent; color: inherit; padding: .55rem .7rem;
  border-radius: 10px; cursor: pointer; }
.tb-menu button:hover { background: var(--surface-top); }
.tb-menu button.danger { color: var(--error); }
@media (max-width: 900px) { .tb-new span { display: none; } .tb-new { padding: 0 .55em; } }

/* pause / record */
.ctl-pause[aria-pressed="true"] { background: var(--secondary); color: var(--on-secondary); border-color: transparent; }
.ctl-rec[aria-pressed="true"] { background: #c62828; color: #fff; border-color: transparent; animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 50% { box-shadow: 0 0 0 6px rgb(198 40 40 / .25); } }

/* scroll mode: the screen scrolls like a phone, no pointer */
.scroll-layer { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: var(--tb); z-index: 3;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.scroll-mode .scroll-layer { display: block; }
body.scroll-mode .rcursor { display: none !important; }
.ctl-scroll[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; }

/* Start: grey when nothing waits, pulsing green when Claude is ready, red Stop while it works */
.ctl-start { opacity: .6; }
.ctl-start[data-state="ready"] { opacity: 1; background: #2e7d32; color: #fff; border-color: transparent; animation: ready 1.2s ease-in-out infinite; }
.ctl-start[data-state="running"] { opacity: 1; background: #c62828; color: #fff; border-color: transparent; }
@keyframes ready { 50% { box-shadow: 0 0 0 7px rgb(46 125 50 / .3); } }

/* the task Claude will do on Start, shown inside the touchpad (Persian, right to left) */
.pad-task { pointer-events: none; display: grid; gap: .6rem; justify-items: center; padding: 1rem 1.2rem; max-width: 100%; }
.pad-task-state { font-size: .78rem; font-weight: 700; padding: .25em .8em; border-radius: 999px; background: #2e7d32; color: #fff; }
.pad-task[data-state="running"] .pad-task-state { background: #c62828; }
.pad-task-text { margin: 0; text-align: right; direction: rtl; unicode-bidi: plaintext; font-family: Vazirmatn, "Noto Sans Arabic", system-ui, sans-serif;
  font-size: 1.05rem; line-height: 1.8; color: var(--on-surface); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pad-task:has(.pad-feed:not([hidden])) { align-self: stretch; width: 100%; box-sizing: border-box; }
.pad-task:has(.pad-feed:not([hidden])) .pad-task-text { -webkit-line-clamp: 2; font-size: .95rem; }
/* live report: one block of text that keeps rising; older parts fade out at the top */
.pad-feed { width: 100%; max-height: 7.6em; overflow: hidden; font-size: .9rem; line-height: 1.6;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em); mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em); }
.pad-feed p { margin: 0; padding-top: 2.4em; color: var(--muted); unicode-bidi: plaintext; overflow-wrap: anywhere; }
.pad-feed .now { color: var(--on-surface); font-weight: 600; }
.pad-feed .now::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-inline-end: .4em; border-radius: 50%;
  background: #c62828; vertical-align: .1em; animation: feed-pulse 1.4s ease-in-out infinite; }
.pad-feed .now { animation: feed-in .5s var(--ease); }
@keyframes feed-pulse { 50% { opacity: .3; } }
@keyframes feed-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pad-feed .now, .pad-feed .now::before { animation: none; } }