:root {
  color-scheme: light;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  color: #242424;
  background: #f5f5f5;
}

* { scrollbar-color: #c7c7c7 transparent; }
body { color:#242424; background:#f5f5f5; }
.shell { grid-template-columns:252px 1fr; background:#f5f5f5; }

aside {
  padding:0;
  border-right:1px solid #e1dfdd;
  background:#fff;
  box-shadow:1px 0 3px #0000000a;
}
.brand {
  height:64px;
  padding:0 20px;
  gap:12px;
  border-bottom:1px solid #edebe9;
}
.brand strong { color:#242424; font-size:15px; font-weight:600; }
.brand small { color:#797775; font-size:9px; font-weight:600; letter-spacing:.1em; }
.mark {
  width:32px;
  height:32px;
  border:0;
  border-radius:4px;
  color:#fff;
  background:#0078d4;
  box-shadow:none;
  font:600 16px "Segoe UI",sans-serif;
}
.new-chat {
  margin:16px 14px 8px;
  padding:10px 12px;
  border:1px solid #0078d4;
  border-radius:3px;
  color:#fff;
  background:#0078d4;
  font-weight:600;
  box-shadow:0 1px 2px #00000010;
}
.new-chat:hover { border-color:#106ebe; background:#106ebe; }
.settings {
  margin:16px 0 0;
  padding:18px 16px;
  gap:18px;
  border-top:1px solid #edebe9;
}
.settings:before {
  content:"WORKSPACE SETTINGS";
  color:#605e5c;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}
.settings label { gap:6px; color:#484644; font-size:12px; font-weight:600; }
.settings label small { color:#8a8886; font-size:10px; font-weight:400; line-height:1.4; }
.settings input,.settings select {
  padding:8px 9px;
  border:1px solid #8a8886;
  border-radius:2px;
  color:#323130;
  background:#fff;
  box-shadow:none;
}
.settings input:focus,.settings select:focus { border-color:#0078d4; box-shadow:inset 0 -1px #0078d4; }
.security {
  margin:0;
  padding:16px 18px;
  border-top:1px solid #edebe9;
  color:#323130;
  background:#faf9f8;
  font-size:12px;
  line-height:1.4;
}
.security>span { display:block; margin-bottom:7px; font-weight:600; }
.security>small { display:block; color:#797775; font-size:10px; line-height:1.6; }
.logout { margin-top:10px; color:#0078d4; font-size:11px; font-weight:600; }
.logout:hover { color:#004578; text-decoration:underline; }

main { background:#f5f5f5; }
header {
  height:64px;
  padding:0 28px;
  border-bottom:1px solid #e1dfdd;
  background:#fff;
  backdrop-filter:none;
  box-shadow:0 1px 2px #00000008;
}
header strong { color:#242424; font-size:16px; font-weight:600; }
header span { color:#797775; }
.state { color:#605e5c; }
.state i { width:6px; height:6px; background:#107c10; box-shadow:none; }
.state.busy i { background:#ffaa44; }

.messages { padding-top:32px; }
.welcome { margin-top:10vh; }
.hero-mark {
  width:52px;
  height:52px;
  border:0;
  border-radius:6px;
  color:#fff;
  background:#0078d4;
  box-shadow:0 3px 8px #00000020;
  font:600 22px "Segoe UI",sans-serif;
}
.welcome h1 { color:#242424; font-size:28px; font-weight:600; }
.welcome p { color:#605e5c; }
.suggestions button {
  min-height:58px;
  padding:12px;
  border:1px solid #e1dfdd;
  border-radius:4px;
  color:#323130;
  background:#fff;
  box-shadow:0 1px 2px #0000000a;
}
.suggestions button:hover { border-color:#0078d4; color:#005a9e; background:#f3f9fd; }
.message .meta { color:#605e5c; }
.avatar { border-radius:3px; color:#fff; background:#605e5c; }
.message.user .avatar { color:#fff; background:#0078d4; }
.bubble { color:#242424; }
.user .bubble {
  padding:13px 15px;
  border:1px solid #c7e0f4;
  border-radius:3px;
  color:#201f1e;
  background:#eff6fc;
}
.tool {
  border-left:3px solid #0078d4;
  color:#484644;
  background:#f3f2f1;
}
.error { color:#a4262c; }
.cursor:after { color:#0078d4; }

.activity {
  border:1px solid #e1dfdd;
  border-radius:4px;
  color:#484644;
  background:#fff;
  box-shadow:0 1px 2px #00000008;
}
.activity summary { padding:10px 12px; }
.activity summary strong { color:#323130; }
.activity .elapsed,.activity .chevron { color:#797775; }
.activity-dot { background:#107c10; box-shadow:none; }
.activity.busy .activity-dot { background:#ffaa44; }
.activity.failed .activity-dot { background:#a4262c; }
.activity-log {
  border-top:1px solid #edebe9;
  color:#605e5c;
  background:#faf9f8;
}
.activity-log>div { border-bottom-color:#edebe9; }
.activity-log>div.active-line { border-left-color:#0078d4; color:#242424; background:#e5f1fb; box-shadow:inset 0 0 0 1px #c7e0f4; }
.activity-log>div.active-line:after { background:linear-gradient(90deg,transparent,#ffffff80,transparent); }
.activity-log .reasoning-live,.activity-log .commentary-live { color:#323130; }
.activity-log .command-output { color:#605e5c; }

footer { background:linear-gradient(transparent,#f5f5f5 20%); }
form#composer {
  border:1px solid #8a8886;
  border-radius:4px;
  background:#fff;
  box-shadow:0 2px 6px #00000012;
}
form#composer:focus-within { border-color:#0078d4; box-shadow:0 0 0 1px #0078d4; }
textarea { color:#242424; }
textarea::placeholder { color:#8a8886; }
.composer-bar { color:#797775; }
.composer-bar button { border-radius:3px; color:#fff; background:#0078d4; }
.composer-bar button:hover { background:#106ebe; }
.composer-bar button.stop { color:#fff; background:#d13438; font-size:14px; }
.composer-bar button.stop:hover { background:#a4262c; }
kbd { border-color:#c8c6c4; color:#605e5c; background:#f3f2f1; }
.notice { color:#8a8886; }

.auth-screen {
  background:#f5f5f5;
  background-image:linear-gradient(135deg,#f5f9fc 0,#fff 55%,#eef6fc 100%);
}
.auth-card {
  border:1px solid #e1dfdd;
  border-radius:6px;
  color:#242424;
  background:#fff;
  box-shadow:0 8px 32px #00000018;
}
.auth-logo {
  border:0;
  border-radius:4px;
  color:#fff;
  background:#0078d4;
  font:600 20px "Segoe UI",sans-serif;
}
.auth-loading,.auth-heading p { color:#605e5c; }
.auth-form { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.auth-heading span { color:#0078d4; }
.auth-heading h1 { color:#242424; font-weight:600; }
.auth-form label { color:#323130; font-weight:600; }
.auth-form input {
  border:1px solid #8a8886;
  border-radius:2px;
  color:#242424;
  background:#fff;
}
.auth-form input:focus { border-color:#0078d4; box-shadow:inset 0 -1px #0078d4; }
.auth-form button { border-radius:2px; color:#fff; background:#0078d4; }
.auth-form button:hover { background:#106ebe; }
.auth-error { color:#a4262c; }
.auth-foot { color:#8a8886; }

@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  aside{display:none}
  header{padding:0 16px}
}