/* K1: the chat's Computer tab (public/computer-panel.js). Tokens only:
   grayscale, with the status colors reserved for meaning (green working,
   amber waiting for you, blue you have control). */
.cc { display:flex; flex-direction:column; gap:12px; min-width:0; }
.cc-bar { display:flex; align-items:center; gap:10px; min-height:34px; }
.cc-status { display:inline-flex; align-items:center; gap:8px; min-width:0; flex:1; font-size:13.5px; font-weight:560; color:var(--ink); }
.cc-status-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink-3); }
.cc-status[data-tone="busy"] .cc-dot { background:var(--green); animation:cc-pulse 1.8s ease-in-out infinite; }
.cc-status[data-tone="ask"] .cc-dot { background:var(--amber); }
.cc-status[data-tone="you"] .cc-dot { background:var(--blue); }
.cc-status[data-tone="off"] .cc-dot { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3); }
@keyframes cc-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.cc-bar-actions { display:inline-flex; align-items:center; gap:6px; flex:none; }
.cc-bar-actions .btn svg { width:15px; height:15px; margin-right:6px; }
.cc-bar-actions .btn { display:inline-flex; align-items:center; }
.cc-off { width:34px; height:34px; display:inline-grid; place-items:center; border:0; border-radius:8px; background:none; color:var(--ink-2); cursor:pointer; }
.cc-off:hover { background:var(--hover); color:var(--ink); }
.cc-off svg { width:17px; height:17px; }

.cc-address { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel-2); }
.cc-address-icon { display:inline-grid; place-items:center; color:var(--ink-3); flex:none; }
.cc-address-icon svg { width:14px; height:14px; }
.cc-address input { flex:1; min-width:0; border:0; outline:0; background:none; color:var(--ink-2); font:inherit; font-size:13px; padding:0; }
.cc-address input[readonly] { cursor:default; }
.cc[data-control="you"] .cc-address { border-color:var(--blue); }
.cc[data-control="you"] .cc-address input { color:var(--ink); }

.cc-screen { position:relative; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; background:var(--bg); aspect-ratio:16/10; display:grid; place-items:center; outline:none; }
.cc-screen img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.cc[data-control="you"] .cc-screen { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); cursor:default; touch-action:none; }
.cc[data-control="you"] .cc-screen:focus-visible { box-shadow:0 0 0 2px var(--blue); }
.cc-screen img[hidden], .cc-screen .cc-empty[hidden], .cc-marker[hidden] { display:none; }
/* Scoped to the screen: Company connections also has a .cc-empty, which this overlay must not cover. */
.cc-screen .cc-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; text-align:center; }
.cc-empty-title { margin:0; font-size:14.5px; font-weight:600; color:var(--ink); }
.cc-empty-text { margin:0; max-width:34ch; font-size:13px; line-height:19px; color:var(--ink-2); }
.cc-screen .cc-empty .btn { margin-top:6px; }
.cc-spinner { width:18px; height:18px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--ink-2); animation:cc-spin .9s linear infinite; }
@keyframes cc-spin { to { transform:rotate(360deg); } }
.cc-marker { position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:2px solid var(--amber);
  box-shadow:0 0 0 4px var(--amber-soft); pointer-events:none; animation:cc-pulse 1.4s ease-in-out infinite; }

.cc-notice { margin:0; font-size:12.5px; line-height:18px; color:var(--ink-2); }
.cc-notice[hidden] { display:none; }
.cc-asks { display:flex; flex-direction:column; gap:8px; }
.cc-asks:empty { display:none; }
.cc-ask { padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); }
.cc-ask-title { margin:0; font-size:13.5px; font-weight:560; color:var(--ink); line-height:19px; }
.cc-ask-detail { margin:4px 0 0; font-size:12.5px; color:var(--ink-2); line-height:18px; overflow-wrap:anywhere; }
.cc-ask-text { margin:6px 0 0; padding:8px 10px; max-height:160px; overflow:auto; font:12.5px/18px var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; }
.cc-ask-url { max-height:none; }
.cc-ask-actions { display:flex; gap:8px; margin-top:10px; }

@media (prefers-reduced-motion: reduce) {
  .cc-status[data-tone="busy"] .cc-dot, .cc-marker, .cc-spinner { animation:none; }
}
@media (max-width:680px) {
  .cc-bar-actions .btn, .cc-ask-actions .btn { min-height:44px; }
  .cc-off { width:44px; height:44px; }
}
.cc-address[hidden] { display:none; }

/* The Computer tab is a fifth tab in the work panel. On a phone the tab row
   scrolls sideways so every tab stays reachable instead of being cut off. */
@media (max-width:900px) {
  .wp-tabs { min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .wp-tabs::-webkit-scrollbar { display:none; }
  .wp-tabs button { flex:none; }
}

/* K1-3: the page asks for a file; downloads filed in this chat; sign-ins. */
.cc-chooser { padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.cc-chooser[hidden], .cc-files[hidden] { display:none; }
.cc-chooser-text { margin:0; font-size:13px; line-height:19px; color:var(--ink); }
.cc-group { margin:4px 0 0; font-size:12px; font-weight:600; color:var(--ink-2); }
.cc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; width:100%; }
.cc-list li { display:flex; align-items:center; gap:4px; min-width:0; }
.cc-file { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink);
  font:inherit; font-size:13px; text-align:left; cursor:pointer; }
button.cc-file:hover { background:var(--hover); }
button.cc-file:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.cc-file.is-muted, .cc-file.is-busy { cursor:default; }
.cc-file-icon { width:16px; height:16px; flex:none; display:grid; place-items:center; color:var(--ink-3); }
.cc-file-icon svg { width:16px; height:16px; }
.cc-file.is-busy .cc-file-icon { animation:cc-pulse 1.4s ease-in-out infinite; }
.cc-file-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-file-note { flex:none; max-width:55%; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-file-save { width:32px; height:32px; flex:none; display:inline-grid; place-items:center; border-radius:8px; color:var(--ink-2); }
.cc-file-save:hover { background:var(--hover); color:var(--ink); }
.cc-file-save svg { width:16px; height:16px; }
.cc-logins { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); }
.cc-logins:empty { display:none; }
.cc-switch { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--ink); cursor:pointer; }
.cc-switch input { appearance:none; width:34px; height:20px; margin:0; border-radius:999px; background:var(--raise); border:1px solid var(--line-2); position:relative; cursor:pointer; flex:none; transition:background .15s ease; }
.cc-switch input::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--ink-2); transition:transform .15s ease, background .15s ease; }
.cc-switch input:checked { background:var(--ink); border-color:var(--ink); }
.cc-switch input:checked::after { transform:translateX(14px); background:var(--bg); }
.cc-switch input:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .cc-file.is-busy .cc-file-icon { animation:none; } }
@media (max-width:680px) { .cc-file { min-height:44px; } .cc-file-save { width:44px; height:44px; } }