/* Claude Code in a terminal. */

body.skin-cli { background: #1a1a1a; }

.cc {
  --bar: #2a2a2a;
  --bar-line: #000;
  --bar-fg: #9a9a9a;
  --dot: #4a4a4a;
  --bg: #1a1a1a;
  --fg: #e6e6e6;
  --dim: #8c8c8c;
  --accent: #d77757;
  --perm: #b1b9f9;
  --ok: #4eba65;
  --red: #ff6b80;
  --warn: #e5b350;
  --add: #213d29;
  --del: #4d2328;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.45;
}

.cc b { font-weight: 700; }
.cc-dim { color: var(--dim); }
.cc-accent { color: var(--accent); }
.cc-red { color: var(--red); }

/* window title */
.cc-bar {
  flex: none;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: var(--bar);
  border-bottom: 1px solid var(--bar-line);
  font-size: 12px;
  color: var(--bar-fg);
}
.cc-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }
.cc-bar em { font-style: normal; margin: 0 auto; padding-right: 50px; }

.cc-scroll { flex: 1; overflow-y: auto; }
.cc-col { max-width: 120ch; padding: 14px 16px 18px; }

.cc-welcome {
  display: inline-block;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 14px 8px;
  margin-bottom: 16px;
}
.cc-gap { margin-top: 8px; }

.cc-log > div { margin-bottom: 12px; }
.cc-user { color: var(--dim); }
.cc-msg, .cc-tool, .cc-note { display: flex; gap: 1ch; }
.cc-bullet { flex: none; }
.cc-bullet.ok { color: var(--ok); }
.cc-bullet.no { color: var(--red); }
.cc-res { padding-left: 2ch; white-space: pre-wrap; word-break: break-word; }
.cc-auto { color: var(--warn); }
.cc-note.warn { color: var(--warn); }
.cc-note.bad { color: var(--red); font-weight: 700; }

.cc-call > .cc-diff { margin: 4px 0 0 5ch; }

/* diff */
.cc-diff { margin-top: 2px; }
.cc-dl { display: flex; white-space: pre-wrap; word-break: break-word; }
.cc-dl.add { background: var(--add); }
.cc-dl.del { background: var(--del); }
.cc-ln { flex: none; width: 5ch; text-align: right; color: var(--dim); padding-right: 1ch; }
.cc-sign { flex: none; width: 2ch; }
.cc-code { flex: 1; min-width: 0; }

/* permission prompt */
.cc-perm {
  border: 1px solid var(--perm);
  border-radius: 6px;
  padding: 6px 12px 8px;
  margin: 4px 0 6px;
}
.cc-perm-title { color: var(--perm); font-weight: 700; margin-bottom: 6px; }
.cc-perm-body { margin-bottom: 8px; }
.cc-cmd { padding-left: 2ch; white-space: pre-wrap; word-break: break-word; }
.cc-file { color: var(--dim); margin-bottom: 2px; }
.cc-q { margin-bottom: 4px; }

.cc-opts { display: flex; flex-direction: column; }
.cc-opts button {
  all: unset;
  display: block;
  cursor: pointer;
  white-space: pre-wrap;
  color: var(--fg);
}
.cc-opts button.sel { color: var(--perm); }
.cc-opts button:focus-visible { outline: 1px dashed var(--perm); }
.cc-ptr { display: inline-block; width: 1ch; }

.cc-spin { color: var(--accent); margin: 4px 0 6px; }
.cc-spin .cc-dim { color: var(--dim); }

/* status lines */
.cc-status {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  flex-wrap: wrap;
  font-size: 13px;
  padding: 0 1ch;
  margin-top: 4px;
}
.cc-yolo { color: var(--warn); }
.cc-perm-c { color: var(--perm); }
.cc { tab-size: 4; }
.cc-envline { font-size: 13px; color: var(--dim); padding: 0 1ch; }
.cc-env-prod { color: var(--red); }
.cc-env-staging { color: var(--warn); }
.cc-env-local { color: var(--ok); }

@media (max-width: 640px) {
  .cc { font-size: 12.5px; }
  .cc-bar em { padding-right: 0; }
  .cc-col { padding: 10px 10px 16px; }
  .cc-ln { width: 3.5ch; }
  .cc-call > .cc-diff { margin-left: 0; }
  .cc-opts button { padding: 4px 0; }
}

/* light theme */
html[data-theme="light"] body.skin-cli { background: #ffffff; }
html[data-theme="light"] .cc {
  --bg: #ffffff;
  --fg: #1f1f1f;
  --dim: #707070;
  --accent: #c25a38;
  --perm: #5769f7;
  --ok: #2c8f45;
  --red: #d23c56;
  --warn: #9a6500;
  --add: #dafbe1;
  --del: #ffe2e5;
  --bar: #ececec;
  --bar-line: #d6d6d6;
  --bar-fg: #666;
  --dot: #c8c8c8;
}