/* Grok Bot 0.18 shell tokens (dark) + conversation/computer layout. */
:root {
  color-scheme: dark;
  --cursor-accent: #599CE7;
  --cursor-base: #F0F0F0;
  --cursor-chrome: #141414;
  --cursor-editor: #181818;
  --cursor-added: #70B489;
  --cursor-danger: #fc6b83;
  --cursor-bg-editor: var(--cursor-editor);
  --cursor-bg-chrome: var(--cursor-chrome);
  --cursor-bg-secondary: color-mix(in srgb, var(--cursor-base) 8%, transparent);
  --cursor-bg-tertiary: color-mix(in srgb, var(--cursor-base) 10%, transparent);
  --cursor-bg-quaternary: color-mix(in srgb, var(--cursor-base) 6%, transparent);
  --cursor-bg-input-surface: var(--cursor-bg-quaternary);
  --cursor-text-primary: var(--cursor-base);
  --cursor-text-secondary: color-mix(in srgb, var(--cursor-base) 74%, transparent);
  --cursor-text-tertiary: color-mix(in srgb, var(--cursor-base) 60%, transparent);
  --cursor-text-quaternary: color-mix(in srgb, var(--cursor-base) 44%, transparent);
  --cursor-input-placeholder-foreground: var(--cursor-text-quaternary);
  --cursor-stroke-tertiary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
  --cursor-stroke-secondary: color-mix(in srgb, var(--cursor-base) 16%, transparent);
  --cursor-stroke-focused: #a9c85d;
  --cursor-radius-base: 6px;
  --cursor-radius-lg: 8px;
  --cursor-radius-full: 999px;
  --cursor-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cursor-font-size-lg: 14px;
  --cursor-font-size-base: 13px;
  --cursor-font-size-xs: 11px;
  --cursor-spacing-0-75: 6px;
  --cursor-box-shadow-sm: 0 2px 8px #0006;
  --sand-fill-primary: #d8fa78;
  --sand-fill-secondary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
  --sand-fill-accent: #c7ec6b;
  --sand-fill-success: #70B489;
  --sand-fill-bubble-agent: #20231f;
  --sand-fill-bubble-user: #2a2d27;
  --sand-text-on-color: #171914;
  --sand-border-weak: var(--cursor-stroke-tertiary);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
textarea, input { font-size: 16px; }
.sand-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  color: var(--cursor-text-primary);
  background: var(--cursor-bg-editor);
  font-family: var(--cursor-font-family-sans);
}
.sand-shell button:disabled { cursor: not-allowed; }

.sand-agents-sidebar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--cursor-bg-chrome);
  border-right: 1px solid var(--cursor-stroke-tertiary);
  padding-top: var(--safe-top);
}
.sand-agents-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--cursor-stroke-tertiary);
}
.sand-agents-sidebar__header strong { font-size: var(--cursor-font-size-lg); }
.sand-agents-sidebar__new {
  width: 28px; height: 28px; padding: 0;
  color: var(--cursor-text-secondary);
  background: transparent; border: 0; border-radius: var(--cursor-radius-lg);
}
.sand-agents-sidebar__new:hover { background: var(--cursor-bg-secondary); }
.sand-agents-create {
  display: flex; gap: 6px; padding: 8px 12px;
}
.sand-agents-create input {
  flex: 1; min-width: 0; min-height: 32px; padding: 6px 8px;
  color: var(--cursor-text-primary);
  background: var(--cursor-bg-input-surface);
  border: 1px solid var(--cursor-stroke-secondary);
  border-radius: var(--cursor-radius-base);
  outline: none;
}
.sand-agents-create button {
  padding: 0 10px; min-height: 32px;
  color: var(--sand-text-on-color);
  background: var(--sand-fill-primary);
  border: 0; border-radius: var(--cursor-radius-base);
  font-weight: 600;
}
.sand-agents-list {
  display: grid;
  flex: 1 1 auto;
  gap: var(--cursor-spacing-0-75);
  min-height: 0;
  overflow: auto;
  padding: 4px 12px 24px;
}
.sand-agents-section__empty {
  display: flex; align-items: center; min-height: 30px; padding: 8px;
  color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs);
}
.sand-agent-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 8px;
  color: var(--cursor-text-primary);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--cursor-radius-lg);
  cursor: pointer;
  touch-action: manipulation;
}
.sand-agent-item:hover, .sand-agent-item[aria-current="true"] { background: var(--cursor-bg-secondary); }
.sand-agent-item__avatar {
  display: grid; place-items: center; width: 34px; height: 34px;
  color: var(--sand-text-on-color); background: var(--sand-fill-accent);
  border-radius: var(--cursor-radius-lg); font-weight: 700;
}
.sand-agent-item__body { display: grid; gap: 4px; min-width: 0; }
.sand-agent-item__name, .sand-agent-item__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sand-agent-item__name { font-size: var(--cursor-font-size-base); }
.sand-agent-item__preview { color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); font-weight: 400; }
.sand-kit-status-dot {
  width: 8px; height: 8px; border-radius: var(--cursor-radius-full); background: #3a3a3a;
}
.sand-kit-status-dot[data-status="working"] { background: var(--sand-fill-success); }
.sand-agents-sidebar__footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--cursor-stroke-tertiary);
}
.sand-agents-sidebar__footer small { display: block; color: var(--cursor-text-tertiary); }

.sand-chat-stage {
  position: relative; z-index: 1;
  display: flex; flex: 1 1 0; flex-direction: column;
  width: 100%; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--cursor-bg-editor);
}
.sand-chat-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; min-height: calc(51px + var(--safe-top));
  padding: var(--safe-top) 16px 0;
  border-bottom: 1px solid var(--cursor-stroke-tertiary);
}
.sand-chat-header__menu {
  display: none; width: 32px; height: 32px; padding: 0;
  color: var(--cursor-text-secondary); background: transparent; border: 0; border-radius: var(--cursor-radius-lg);
}
.sand-chat-header__identity { display: flex; align-items: center; gap: 9px; padding: 5px 7px; min-width: 0; }
.sand-chat-header__avatar {
  display: grid; place-items: center; width: 28px; height: 28px;
  color: var(--sand-text-on-color); background: var(--sand-fill-accent);
  border-radius: var(--cursor-radius-lg); font-weight: 700;
}
.sand-chat-header__identity small { display: block; color: var(--cursor-text-tertiary); }
.sand-chat-header__controls { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sand-chat-header__controls button {
  min-height: 32px; padding: 4px 8px;
  color: var(--cursor-text-secondary); background: transparent;
  border: 0; border-radius: var(--cursor-radius-lg);
}
.sand-chat-header__controls button:hover { background: var(--cursor-bg-secondary); }
.sand-chat-header__controls .danger { color: var(--cursor-danger); }

.sand-virtual-transcript {
  flex: 1 1 0; min-height: 0; overflow: auto;
  padding: 28px max(30px, calc((100% - 690px) / 2));
  outline: none;
}
.sand-transcript-row { margin: 0 0 22px; }
.sand-transcript-row--user { display: flex; justify-content: flex-end; }
.sand-message {
  box-sizing: border-box;
  max-width: min(88%, 640px, calc(100% - 82px));
  padding: 8px 12px;
  overflow-wrap: anywhere;
  color: var(--cursor-text-primary);
  background: var(--sand-fill-bubble-agent);
  border-radius: 18px;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: var(--cursor-font-size-base);
}
.sand-transcript-row--user .sand-message { background: var(--sand-fill-bubble-user); }
.sand-activity { margin: 0 0 10px; color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); }
.sand-typing-indicator { display: flex; gap: 4px; width: max-content; padding: 10px 12px; background: #20231f; border-radius: 14px; }
.sand-typing-indicator span { width: 5px; height: 5px; background: #9ba392; border-radius: 50%; }
.sand-question {
  margin: 0 max(30px, calc((100% - 690px) / 2)) 8px;
  padding: 12px;
  border: 1px solid var(--cursor-stroke-tertiary);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sand-fill-accent) 8%, var(--cursor-bg-editor));
}
.sand-question p { margin: 0 0 8px; }
.sand-question__options { display: flex; flex-wrap: wrap; gap: 8px; }
.sand-question__options button {
  min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: var(--sand-fill-primary); color: var(--sand-text-on-color); font-weight: 600;
}

.sand-chat-input-dock {
  display: flex; flex: 0 0 auto; flex-direction: column;
  width: 100%; min-width: 0;
  padding: 8px max(24px, calc((100% - 700px) / 2)) calc(18px + var(--safe-bottom));
}
.sand-prompt-shell {
  position: relative; padding: 9px;
  background: var(--cursor-bg-input-surface);
  border: 1px solid var(--cursor-stroke-secondary);
  border-radius: 16px;
  box-shadow: var(--cursor-box-shadow-sm);
}
.sand-prompt-field {
  display: block; box-sizing: border-box; width: 100%; min-height: 48px; resize: none;
  color: var(--cursor-text-primary); background: transparent; border: 0; outline: none; line-height: 1.4;
}
.sand-prompt-field::placeholder { color: var(--cursor-input-placeholder-foreground); }
.sand-prompt-actions-row { display: flex; align-items: center; justify-content: flex-end; }
.sand-prompt-send {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  color: var(--sand-text-on-color); background: var(--sand-fill-primary);
  border: 0; border-radius: 50%;
}
.sand-prompt-send:disabled { cursor: not-allowed; opacity: .4; }

.sand-computer-pane {
  position: fixed; inset: 0 0 0 auto; z-index: 20;
  display: flex; flex-direction: column; width: min(52vw, 720px);
  background: #0d0f0c; border-left: 1px solid var(--cursor-stroke-tertiary);
  padding-top: var(--safe-top);
}
.sand-computer-pane[hidden] { display: none !important; }
.sand-computer-pane__top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 51px; padding: 0 12px;
  background: var(--cursor-bg-chrome);
  border-bottom: 1px solid var(--cursor-stroke-tertiary);
}
.sand-computer-pane iframe { flex: 1; width: 100%; border: 0; background: #111; }
.sand-computer-pane__status {
  margin: 0; padding: 8px 12px calc(8px + var(--safe-bottom));
  color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs);
  background: var(--cursor-bg-chrome);
}

.sand-tabbar { display: none; }
.sand-backdrop { display: none; }

@media (max-width: 860px) {
  .sand-shell { grid-template-columns: 1fr; }
  .sand-agents-sidebar {
    position: fixed; z-index: 9; inset: 0 auto 0 0; width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }
  .sand-agents-sidebar.is-open { transform: none; }
  .sand-chat-header__menu { display: inline-flex; }
  .sand-computer-pane { inset: 0; width: 100%; }
  .sand-tabbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 6px 8px calc(6px + var(--safe-bottom));
    background: color-mix(in srgb, var(--cursor-bg-chrome) 92%, transparent);
    border-top: 1px solid var(--cursor-stroke-tertiary);
  }
  .sand-tabbar button {
    min-height: 44px; border: 0; border-radius: 12px;
    background: transparent; color: var(--cursor-text-tertiary); font-weight: 600;
  }
  .sand-tabbar button[aria-current="true"] { color: var(--cursor-text-primary); background: var(--cursor-bg-secondary); }
  .sand-chat-input-dock { padding-bottom: calc(64px + var(--safe-bottom)); }
  .sand-backdrop {
    display: block; position: fixed; inset: 0; z-index: 8; background: #0008;
  }
  .sand-backdrop[hidden] { display: none !important; }
}