/* browser.css — the GrokBot desktop (in-browser Linux + web browser) */
#screen-frame { display: flex; flex-direction: column; }
#desk { position: relative; flex: 1; min-height: 0; isolation: isolate; overflow: hidden;
  background: radial-gradient(900px 520px at 78% -8%, #6d28d955, transparent 60%), radial-gradient(700px 500px at -5% 105%, #0891b240, transparent 60%), linear-gradient(160deg, #0d0a24, #070512 60%, #0a0818); }
#desk::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#ffffff10 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }

#desk-icons { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 0; }
.dicon { width: 76px; padding: 8px 4px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #e7e3ff; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 1px 3px #000; cursor: pointer; }
.dicon span { font-size: 26px; filter: drop-shadow(0 4px 10px #0009); }
.dicon:hover { background: #ffffff12; border-color: #ffffff1a; }

/* ---------- windows ---------- */
.gwin { position: absolute; display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden; background: #0b0920f2; border: 1px solid #ffffff1f; box-shadow: 0 24px 60px #000b, 0 0 0 1px #0008; transition: opacity .18s, transform .18s; }
.gwin.focused { border-color: #a78bfa66; box-shadow: 0 28px 70px #000d, 0 0 0 1px #000, 0 0 40px #8b5cf62a; }
.gwin.min { opacity: 0; transform: translateY(30px) scale(.96); pointer-events: none; }
.gwin.max { border-radius: 0; border-width: 0; }
body.wm-dragging, body.wm-dragging * { user-select: none !important; }
body.wm-dragging iframe { pointer-events: none; }
.gwin-bar { height: 34px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(180deg, #1b1631, #130f25); border-bottom: 1px solid #ffffff12; font-size: 12.5px; color: #d7d3ee; user-select: none; cursor: default; touch-action: none; }
.gwin:not(.focused) .gwin-bar { color: #9d98b8; background: #120f22; }
.gwin-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gwin-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.gwin-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 2; background: linear-gradient(135deg, transparent 55%, #ffffff30 55% 62%, transparent 62% 72%, #ffffff30 72% 79%, transparent 79%); }
.gwin.max .gwin-grip { display: none; }
.dots3 { display: inline-flex; gap: 6px; flex-shrink: 0; }
.dots3 i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; cursor: pointer; }
.dots3 i:nth-child(2) { background: #febc2e; } .dots3 i:nth-child(3) { background: #28c840; }
.gwin:not(.focused) .dots3 i { background: #ffffff26; }
.dots3 i:hover { filter: brightness(1.2); box-shadow: 0 0 0 2px #ffffff22; }

/* ---------- terminal ---------- */
#w-term { background: #07051af5; }
#win-cwd { font-family: ui-monospace, Menlo, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#term { flex: 1; min-height: 0; padding: 8px 4px 6px 10px; }
#term .xterm { height: 100%; }
#term .xterm-viewport { scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; background: transparent !important; }

/* ---------- files ---------- */
#files { background: #0b0920; }
#tree { flex: 1; overflow: auto; padding: 6px 4px; font-size: 12.5px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.files-foot { font-size: 11px; padding: 6px 12px 8px; border-top: 1px solid #ffffff10; }
.node { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dcd8f0; border: 1px solid transparent; }
.node:hover { background: #ffffff0d; }
.node.dir { color: #c4b5fd; font-weight: 600; }
.node .nm { overflow: hidden; text-overflow: ellipsis; }
.node.new { animation: flash 2.2s ease; }
@keyframes flash { 0%, 30% { background: #8b5cf640; border-color: #a78bfa88; } 100% { background: transparent; } }
.node.open { background: #8b5cf622; }

/* ---------- browser ---------- */
#w-browser { background: #15122a; }
.br-ai { font-size: 11px; color: #e9d5ff; background: #8b5cf633; border: 1px solid #a78bfa66; padding: 2px 9px; border-radius: 99px; white-space: nowrap; animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 14px #8b5cf6aa; } }
.br-tools { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #1a1630; border-bottom: 1px solid #ffffff12; }
.br-btn { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 0; background: transparent; color: #d7d3ee; font-size: 15px; display: grid; place-items: center; cursor: pointer; }
.br-btn:hover:not(:disabled) { background: #ffffff14; }
.br-btn:disabled { opacity: .35; cursor: default; }
.br-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: #0b0918; border: 1px solid #ffffff1a; }
.br-addr:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 3px #8b5cf633; }
#br-lock { font-size: 11px; opacity: .8; }
#br-address { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #f1efff; font: 13px system-ui, sans-serif; }
.br-progress { height: 2px; background: transparent; overflow: hidden; flex-shrink: 0; }
.br-progress div { height: 100%; width: 30%; background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); transform: translateX(-100%); }
.br-progress.on div { animation: brload 1.1s ease-in-out infinite; }
@keyframes brload { to { transform: translateX(400%); } }
.br-body { flex: 1; min-height: 0; position: relative; background: #fff; overflow: hidden; }
#br-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
#br-start { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #e9e6ff;
  background: radial-gradient(600px 300px at 50% 0%, #6d28d955, transparent 70%), #0e0b20; }
.bs-logo { width: 54px; height: 54px; border-radius: 16px; background: #000; display: grid; place-items: center; color: #fff; border: 1px solid #ffffff22; box-shadow: 0 0 40px #8b5cf688; }
#br-start h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.bs-search { display: flex; width: min(520px, 100%); height: 44px; border-radius: 99px; background: #fff; overflow: hidden; box-shadow: 0 10px 30px #0008; }
.bs-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 18px; font-size: 15px; color: #111; background: transparent; }
.bs-search button { border: 0; background: linear-gradient(135deg, #7c3aed, #0891b2); color: #fff; font-weight: 700; padding: 0 18px; cursor: pointer; }
.bs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 10px; }
.bs-tiles button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; border: 1px solid #ffffff18; background: #ffffff0a; color: #e9e6ff; font-size: 12px; cursor: pointer; }
.bs-tiles button span { font-size: 22px; }
.bs-tiles button:hover { background: #ffffff16; border-color: #a78bfa66; }
.bs-note { font-size: 12px; color: #a39fbe; max-width: 420px; margin: 0; }
#br-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: #333; background: #f7f7fb; font-size: 14px; }
#br-error .be-ico { font-size: 40px; opacity: .6; }
#br-error .be-msg { color: #555; max-width: 460px; }
#br-error .be-url { font-size: 12px; word-break: break-all; color: #888; }
#br-error .btn { color: #222; background: #fff; border-color: #ccc; margin-top: 6px; }
#br-cursor { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transform: translate(40%, 40%); transition: transform .5s cubic-bezier(.4,.1,.2,1), opacity .2s; display: flex; align-items: flex-start; }
#br-cursor.show { opacity: 1; }
#br-cursor svg { filter: drop-shadow(0 3px 6px #0007); margin: -3px 0 0 -4px; }
#br-cursor span { font: 600 10.5px system-ui, sans-serif; color: #fff; background: #7c3aed; padding: 1px 7px; border-radius: 99px; margin: 18px 0 0 -6px; box-shadow: 0 2px 8px #0006; }
#br-cursor.click svg { animation: clickp .26s ease; }
@keyframes clickp { 50% { transform: scale(.75); } }
#br-status { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 70%; font: 11.5px system-ui, sans-serif; color: #333; background: #f1f1f6f0; border: 1px solid #ccc; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#br-status:empty { display: none; }

/* ---------- viewer ---------- */
#viewer { position: absolute; z-index: 9000; right: 16px; bottom: 16px; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 60px); display: flex; flex-direction: column; border-radius: 12px; background: #0d0a1ef7; border: 1px solid #8b5cf677; box-shadow: 0 20px 60px #000c, 0 0 40px #8b5cf633; backdrop-filter: blur(8px); animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.viewer-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #ffffff14; font-size: 13px; }
.viewer-head .muted { font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbtn.small { height: 28px; min-width: 28px; padding: 0 8px; font-size: 12px; }
#viewer-body { margin: 0; padding: 12px 14px; overflow: auto; font: 12.5px/1.55 ui-monospace, Menlo, Consolas, monospace; color: #e6e3f5; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; }

/* ---------- taskbar ---------- */
#taskbar { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: #0a0817f2; border-top: 1px solid #ffffff14; position: relative; z-index: 1; }
.tb-start { width: 30px; height: 30px; border-radius: 9px; border: 1px solid #ffffff22; background: #000; color: #fff; display: grid; place-items: center; box-shadow: 0 0 16px #8b5cf655; }
.tasks { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.task { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #a8a3c4; font-size: 12px; position: relative; white-space: nowrap; }
.task b { font-weight: 500; }
.task:hover { background: #ffffff0e; }
.task.open { color: #e9e6ff; }
.task.open::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 2px; border-radius: 2px; transform: translateX(-50%); background: #a78bfa88; }
.task.active { background: #ffffff12; border-color: #ffffff18; }
.task.active::after { width: 16px; background: #a78bfa; }
.tb-tray, .tb-clock { font-size: 11.5px; color: #a8a3c4; white-space: nowrap; }
.tb-clock { font-variant-numeric: tabular-nums; padding-right: 4px; }

/* ---------- boot ---------- */
.boot-logo { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: #000; border: 1px solid #ffffff22; box-shadow: 0 0 50px #8b5cf6aa; color: #fff; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.boot-bar { width: min(320px, 80%); height: 6px; border-radius: 99px; background: #ffffff12; overflow: hidden; }
.boot-bar div { height: 100%; width: 5%; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .4s ease; box-shadow: 0 0 14px #8b5cf6; }
.sm-sub.tiny { font-size: 11.5px; opacity: .75; }
.screen-msg { transition: opacity .5s ease; z-index: 5 !important; }
.screen-msg.fade { opacity: 0; pointer-events: none; }
#agent-banner, #control-hint { z-index: 6 !important; }
#screen-frame.controlling #w-term { border-color: #34d399aa; box-shadow: 0 0 0 2px #34d39944, 0 24px 60px #000b; }

@media (max-width: 900px) {
  #btn-files span, #btn-browser span { display: none; }
  #win-cwd, #desk-icons, .tb-tray { display: none; }
  .task b { display: none; }
  .task { padding: 0 10px; font-size: 15px; }
  #viewer { right: 8px; bottom: 8px; width: calc(100% - 16px); }
  .bs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
}
#messages > * { flex-shrink: 0; }
#br-reader { font-size: 13px; } #br-reader.on { background: #8b5cf633; box-shadow: inset 0 0 0 1px #a78bfa88; }