/* 01. Theme and typography
   Shared colors live here so the interface can be restyled in one place. */
:root {
  font-family:
    Inter,
    Segoe UI,
    system-ui,
    sans-serif;
  color: #e9eeec;
  background: #101413;
  font-size: 14px;
  --muted: #92a29a;
  --border: #29342e;
  --accent: #a8e7bd;
}

/* 02. Base elements and shared controls
   Keep controls consistent across the sign-in screen and the workspace. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
  border: 1px solid var(--border);
  background: #1b2420;
  border-radius: 9px;
  padding: 10px 14px;
}

button:hover {
  background: #2a3930;
}

button:disabled {
  opacity: 0.45;
  cursor: wait;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

input,
textarea,
select {
  color: inherit;
  background: #151c18;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

input:focus,
textarea:focus {
  outline: 1px solid #76b98c;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Author display rules must not reveal a view that still has the hidden attribute. */
[hidden] {
  display: none !important;
}

.muted,
small {
  color: var(--muted);
}

.eyebrow,
.section-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 650;
  color: var(--muted);
}

.primary {
  background: var(--accent);
  color: #14291c;
  font-weight: 650;
  border: 0;
}

.primary:hover {
  background: #c0f1d0;
}

.primary span {
  margin-left: 18px;
}

/* 03. Sign-in screen
   This full-height view is hidden once the browser session is authenticated. */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 30%, #21352a 0, transparent 60%);
  padding: 24px;
}

.login-card {
  width: 390px;
  max-width: 100%;
  padding: 38px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #151d18;
  box-shadow: 0 24px 90px #0004;
}

.brand-mark {
  font-size: 36px;
  color: var(--accent);
  margin-bottom: 28px;
}

.brand-mark span {
  font-size: 25px;
}

.login-card h1 {
  font-size: 28px;
  letter-spacing: -1px;
  margin: 10px 0;
}

.login-card label {
  display: block;
  margin: 32px 0 9px;
  color: #c3cec7;
  font-size: 12px;
}

.login-card input,
.login-card button {
  width: 100%;
}

.login-card button {
  margin-top: 14px;
}

.login-card small {
  display: block;
  margin-top: 30px;
  font-size: 10px;
}

.error {
  color: #ffb5a5;
  font-size: 12px;
}

/* 04. Desktop shell and conversation sidebar
   The shell stays within the viewport; the conversation list and messages scroll independently. */
.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100dvh;
}

aside {
  background: #141b17;
  border-right: 1px solid var(--border);
  padding: 28px 18px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 25px;
  color: var(--accent);
  padding: 0 12px;
}

.brand span {
  font-size: 18px;
}

.brand strong {
  font-size: 15px;
  font-weight: 600;
  color: #e6eee8;
  margin-left: 10px;
}

.section-label {
  margin: 50px 12px 16px;
}

.new-chat {
  text-align: left;
  background: transparent;
  border: 1px solid #3a5141;
  color: var(--accent);
  padding: 12px;
}

nav {
  overflow: auto;
  flex: 1;
  margin-top: 22px;
}

nav button {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font-size: 12px;
  padding: 13px 12px;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

nav button.selected {
  background: #24332a;
  color: #e0f2e5;
}

.aside-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 10px 0;
}

.machine {
  display: flex;
  gap: 12px;
  align-items: center;
}

.machine strong {
  font-size: 12px;
}

.machine small {
  display: block;
  font-size: 10px;
  margin-top: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c18566;
}

.dot.online {
  background: #a8e7bd;
  box-shadow: 0 0 10px #a8e7bd44;
}

.text-button {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  padding: 16px 0 0;
}

/* 05. Main column and header
   min-width/min-height: 0 lets flex children shrink instead of expanding the page around long output. */
main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 27px 38px;
  border-bottom: 1px solid var(--border);
}

header h1 {
  font-size: 15px;
  letter-spacing: -0.25px;
  font-weight: 500;
  margin: 9px 0 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.gateway {
  color: #a5bbae;
  font-size: 11px;
  white-space: nowrap;
}

select {
  font-size: 11px;
  padding: 9px;
  max-width: 220px;
}

.notice {
  background: #42351e;
  color: #eddbab;
  margin: 16px 30px 0;
  border: 1px solid #6b5831;
  border-radius: 9px;
  padding: 12px 16px;
  font-size: 12px;
}

/* 06. Message scroll area
   The centered content width is shared by messages, approvals and the composer. */
.messages {
  flex: 1;
  overflow: auto;
  padding: 30px max(24px, calc((100% - 840px) / 2));
  scroll-behavior: smooth;
}

/* 07. Empty conversation and suggested prompts */
.welcome {
  max-width: 650px;
  margin: 8vh auto 30px;
}

.welcome-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #425e49;
  border-radius: 14px;
  color: var(--accent);
  font-size: 25px;
  margin-bottom: 30px;
}

.welcome h2 {
  font-size: 38px;
  letter-spacing: -1.5px;
  font-weight: 500;
  margin: 16px 0;
}

.welcome > p:not(.eyebrow) {
  line-height: 1.8;
  color: var(--muted);
  font-size: 14px;
}

.suggestions {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

.suggestions button {
  text-align: left;
  font-size: 12px;
  padding: 18px;
  background: #18221c;
  flex: 1;
}

.suggestions span {
  float: right;
  margin-left: 16px;
  color: var(--accent);
}

.route {
  display: flex;
  gap: 13px;
  margin-top: 45px;
  align-items: center;
  font-size: 10px;
  color: #87978d;
}

.route span {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.route i {
  font-style: normal;
}

/* 08. Conversation items
   Preserve line breaks in generated text; keep long command output inside its own scroll area. */
.message {
  margin-bottom: 28px;
  line-height: 1.7;
}

.message .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  color: var(--muted);
}

.message.user {
  padding: 18px 22px;
  background: #1d2a22;
  border: 1px solid #314438;
  border-radius: 12px;
}

.message .body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.message.tool {
  font-size: 12px;
  border-left: 2px solid #425b4a;
  padding-left: 15px;
}

.message.tool .body {
  font-family: Consolas, monospace;
  font-size: 11px;
  max-height: 230px;
  overflow: auto;
  color: #aebeb3;
}

.message.error .body {
  color: #ffb5a5;
}

/* 09. Approval requests and structured questions
   A bounded height keeps pending requests from pushing the composer off screen. */
.requests {
  padding: 0 max(24px, calc((100% - 840px) / 2));
  max-height: 35vh;
  overflow: auto;
}

.request {
  border: 1px solid #8a7644;
  background: #2b281c;
  padding: 18px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.request h3 {
  font-size: 13px;
  margin: 0 0 10px;
}

.request pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
  max-height: 160px;
  overflow: auto;
}

.request button {
  margin: 10px 8px 0 0;
}

.request label {
  display: block;
  margin: 12px 0 5px;
}

.request input,
.request select {
  width: 100%;
}

/* 10. Message composer and status
   The composer sits outside the message scroller so it remains available during streaming. */
footer {
  padding: 12px max(24px, calc((100% - 840px) / 2)) 15px;
}

#composer {
  padding: 15px;
  border: 1px solid #425647;
  background: #18211b;
  border-radius: 15px;
  box-shadow: 0 6px 30px #0002;
}

textarea {
  width: 100%;
  resize: vertical;
  max-height: 200px;
  background: transparent;
  border: 0;
  outline: 0 !important;
  padding: 4px;
  line-height: 1.6;
}

.composer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.composer-bottom > span {
  color: var(--muted);
  font-size: 10px;
}

.composer-bottom button {
  padding: 9px 14px;
  font-size: 12px;
}

.footer-note {
  text-align: center;
  font-size: 10px;
  color: #7b8c80;
  margin-bottom: 0;
  line-height: 1.6;
}

/* 11. Tablet layout (800px and below)
   Narrow the sidebar and stack controls that no longer fit on one line. */
@media (max-width: 800px) {
  .shell {
    grid-template-columns: 190px 1fr;
  }

  aside {
    padding: 24px 10px;
  }

  .brand {
    padding: 0 5px;
  }

  .brand strong {
    font-size: 12px;
  }

  header {
    padding: 20px;
  }

  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .welcome h2 {
    font-size: 30px;
  }

  .suggestions {
    flex-direction: column;
  }

  .route {
    gap: 5px;
  }

  .route span {
    padding: 6px;
  }

  .gateway {
    display: none;
  }
}

/* 12. Phone layout (560px and below)
   Replace the sidebar with a compact top bar while retaining the new-conversation action. */
@media (max-width: 560px) {
  .shell {
    grid-template-columns: 1fr;
  }

  aside {
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  aside .brand {
    font-size: 20px;
  }

  .brand strong {
    display: none;
  }

  .section-label,
  nav,
  .aside-bottom {
    display: none;
  }

  .new-chat {
    margin-left: auto;
    padding: 8px;
    font-size: 11px;
  }

  .shell {
    height: 100dvh;
    grid-template-rows: auto 1fr;
  }

  header {
    padding: 16px;
  }

  header h1 {
    font-size: 12px;
  }

  .messages {
    padding: 20px;
  }

  .welcome {
    margin-top: 3vh;
  }

  .welcome h2 {
    font-size: 28px;
  }

  footer {
    padding: 10px 16px;
  }

  .footer-note {
    font-size: 9px;
  }

  .route {
    margin-top: 24px;
  }
}

/* Account allowance stays visible above the connection controls. */
.usage {
  padding: 16px;
  margin-top: 12px;
  border-top: 1px solid #303640;
  overflow-y: auto;
  max-height: 38vh;
  font-size: 12px;
}
.usage-window {
  margin-top: 12px;
}
.usage-window strong {
  display: block;
  margin: 4px 0;
}
.usage small {
  display: block;
  color: #aab3c2;
  margin-top: 4px;
}
.usage progress {
  width: 100%;
  height: 7px;
  accent-color: #65d6ae;
}
.usage-window.warning strong {
  color: #f4ca70;
}
.usage-window.warning progress {
  accent-color: #f4ca70;
}
.usage-window.critical strong {
  color: #ff9191;
}
.usage-window.critical progress {
  accent-color: #ff9191;
}

/* Projects organize navigation without changing the agent's filesystem access. */
nav details {
  margin: 10px 0;
}
nav summary {
  cursor: pointer;
  padding: 8px 12px;
  color: #aabeb2;
  font-size: 12px;
}
nav details button {
  width: 100%;
  text-align: left;
}
.empty-project {
  display: block;
  padding: 8px 16px;
  color: #8d9d94;
}
.conversation-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-bottom: 1px solid #303b34;
  flex-wrap: wrap;
}
.conversation-tools label {
  font-size: 12px;
  color: #aabeb2;
}
.conversation-tools select {
  max-width: 220px;
}

/* Destructive controls use a distinct color; confirmation explains their scope. */
.danger-button {
  color: #ffaaaa;
}
.project-actions {
  display: flex;
  gap: 4px;
  padding: 0 8px 6px;
}
nav .project-actions button {
  width: auto;
  padding: 5px;
  font-size: 11px;
  white-space: normal;
}
nav .project-actions .danger-button {
  color: #ffaaaa;
}

/* Application sharing is a separate workspace; its image contains only the selected window. */
.applications-link {
  display: block;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.remote-page {
  padding: 18px;
}
.remote-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 0 20px;
  flex-wrap: wrap;
}
.remote-header h1 {
  margin: 0;
  font-size: 24px;
}
.remote-header span {
  color: var(--muted);
  margin-left: auto;
}
.remote-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.remote-toolbar label {
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.remote-toolbar select {
  max-width: min(480px, 85vw);
}
.remote-toolbar .remote-control {
  display: flex;
  align-items: center;
  padding: 12px;
}
.remote-stage {
  min-height: 300px;
  max-height: 75vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 12px;
  background: #090d0b;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.remote-stage img {
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
}
.remote-text {
  flex: 1;
  min-width: 240px;
}
.remote-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* At 100%, scroll from the top-left rather than clipping an oversized image's left edge. */
.remote-stage.original-size {
  max-height: none;
  justify-content: flex-start;
}
.remote-stage.original-size img {
  max-width: none;
  flex: none;
}

/* The resolution picker remains usable on narrow pop-out windows. */
#remoteResolutionDialog {
  width: min(540px, 90vw);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: #131d17;
}
#remoteResolutionDialog::backdrop {
  background: #0009;
}
#remoteResolutionDialog label {
  display: block;
  margin: 16px 0;
}
#remoteResolutionDialog select {
  display: block;
  max-width: 100%;
  margin-top: 6px;
}

#remoteClipboardDialog {
  width: min(560px, 90vw);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: #131d17;
}
#remoteClipboardDialog::backdrop {
  background: #0009;
}
#remoteClipboardText {
  width: 100%;
  margin: 12px 0;
}
#remoteClipboardPreview {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

#remoteCopyDialog {
  width: min(600px, 90vw);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: #131d17;
}
#remoteCopyDialog::backdrop {
  background: #0009;
}
#remoteCopyText {
  width: 100%;
  margin: 12px 0;
}
#remoteCopyPreview {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}