html[data-theme="cli"] {
  --bg: #171715;
  --surface: #1d1d1a;
  --text: #d8d3ca;
  --muted: #aaa59c;
  --hint: #7f7b73;
  --line: #3a3933;
  --accent: #d97757;
  --accent-soft: #2b231f;
  --self: #d97757;
  --self-soft: #29231f;
  --warn-soft: #312b1e;
  --warn: #d6aa66;
  --danger: #e07a66;
  --cli-blue: #6aa9ff;
  --cli-cyan: #63d5cf;
  color-scheme: dark;
}

html[data-theme="cli"] body {
  background: #171715;
  color: #d8d3ca;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: -0.01em;
}

html[data-theme="cli"] .view {
  background: #171715;
}

html[data-theme="cli"] .langbar {
  background: #24231f;
  border-bottom: 1px solid #3a3933;
}

html[data-theme="cli"] .langbar .flag {
  border-radius: 2px;
  font-family: inherit;
}

html[data-theme="cli"] .langbar .flag.active {
  background: #33261f;
  color: #e58a68;
}

html[data-theme="cli"] .login-box {
  border: 1px solid #48463e;
  border-radius: 3px;
  background: #1d1d1a;
  box-shadow: 12px 12px 0 #11110f;
}

html[data-theme="cli"] .login-box h1::before {
  content: "❯ ";
  color: #d97757;
}

html[data-theme="cli"] input,
html[data-theme="cli"] select,
html[data-theme="cli"] textarea {
  border: 1px solid #48463e;
  border-radius: 2px;
  background: #171715;
  color: #e5e0d7;
  font-family: inherit;
}

html[data-theme="cli"] input:focus,
html[data-theme="cli"] select:focus,
html[data-theme="cli"] textarea:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 1px #d97757;
}

html[data-theme="cli"] button {
  border-color: #48463e;
  border-radius: 2px;
  background: #24231f;
  color: #d8d3ca;
  font-family: inherit;
}

html[data-theme="cli"] button.primary {
  border-color: #d97757;
  background: #d97757;
  color: #1a1816;
  font-weight: 700;
}

html[data-theme="cli"] button.ghost {
  color: #d97757;
}

html[data-theme="cli"] .bar {
  min-height: 58px;
  border-bottom: 1px solid #48463e;
  background: #24231f;
  box-shadow: inset 0 -1px #11110f;
}

html[data-theme="cli"] .bar::before {
  content: "●";
  flex: none;
  color: #d97757;
  font-size: 10px;
}

html[data-theme="cli"] .bar h2 {
  color: #e5e0d7;
  font-size: 14px;
  font-weight: 650;
}

html[data-theme="cli"] .bar h2::before {
  content: "$ ";
  color: #d97757;
}

html[data-theme="cli"] .bar .sub {
  color: #8f8b83;
}

html[data-theme="cli"] .account-bar,
html[data-theme="cli"] .friend-form,
html[data-theme="cli"] .relation-section {
  border-color: #3a3933;
  background: #1d1d1a;
}

html[data-theme="cli"] .list {
  background: #171715;
}

html[data-theme="cli"] .list li {
  border-color: #35342f;
  border-radius: 0;
  background: transparent;
}

html[data-theme="cli"] .partner-main {
  border-bottom: 1px solid #34332e;
  background: #1d1d1a;
}

html[data-theme="cli"] .partner-main::before {
  content: ">";
  flex: none;
  color: #d97757;
  font-weight: 700;
}

html[data-theme="cli"] .partner-main:hover,
html[data-theme="cli"] .partner-main:focus-visible {
  background: #27251f;
}

html[data-theme="cli"] .partner-time,
html[data-theme="cli"] .list .meta span {
  color: #8f8b83;
}

html[data-theme="cli"] .msgs {
  background-color: #171715;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 100% 24px;
  gap: 11px;
  padding-inline: clamp(12px, 3vw, 34px);
}

html[data-theme="cli"] .row {
  position: relative;
  width: min(100%, 58rem);
  max-width: min(100%, 58rem);
}

html[data-theme="cli"] .row.self,
html[data-theme="cli"] .row.peer {
  align-self: flex-start;
  align-items: flex-start;
}

html[data-theme="cli"] .bubble {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 5px 84px 5px 28px;
  box-shadow: none;
}

html[data-theme="cli"] .row.peer .bubble {
  background: transparent;
}

html[data-theme="cli"] .row.self .bubble {
  border-color: transparent;
  background: transparent;
}

html[data-theme="cli"] .row.peer .bubble::before {
  content: "●";
  position: absolute;
  inset-inline-start: 3px;
  top: 5px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

html[data-theme="cli"] .row.self .bubble::before {
  content: "❯";
  position: absolute;
  inset-inline-start: 2px;
  top: 4px;
  color: #d97757;
  font-weight: 700;
}

html[data-theme="cli"] .bubble.has-quote-table {
  padding: 5px 0 5px 28px;
}

html[data-theme="cli"] .bubble.has-quote-table::before {
  display: none;
}

html[data-theme="cli"] .message-time,
html[data-theme="cli"] .row.self .message-time {
  border-radius: 0;
  background: transparent;
  color: #77736b;
}

html[data-theme="cli"] .message-peer-avatar-button {
  display: none;
}

html[data-theme="cli"] .row.peer .bubble.has-peer-avatar {
  padding-inline-start: 28px;
}

html[data-theme="cli"] .bubble .origin {
  position: relative;
  margin-top: 5px;
  padding: 0 0 0 24px;
  border: 0;
  color: var(--cli-blue);
}

html[data-theme="cli"] .bubble .origin::before {
  content: "⎿";
  position: absolute;
  inset-inline-start: 2px;
  color: var(--text);
}

html[data-theme="cli"] .bubble .translated {
  color: #e5e0d7;
}

html[data-theme="cli"] .bubble .pending {
  color: #d8d3ca;
}

html[data-theme="cli"] .quote-reference {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

html[data-theme="cli"] .quote-reference::before {
  content: "↳";
  position: absolute;
  inset-inline-start: 8px;
  top: 50%;
  color: var(--text);
  transform: translateY(-50%);
}

html[data-theme="cli"] .quote-reference b {
  padding: 7px 9px 7px 28px;
  border-inline-end: 1px solid #6d6960;
  color: var(--text);
}

html[data-theme="cli"] .quote-reference span {
  padding: 7px 9px;
  color: var(--cli-blue);
}

html[data-theme="cli"] .quoted-message-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
}

html[data-theme="cli"] .quoted-message-table .quote-reference {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline-end: 84px;
  border: 0;
  border-bottom: 1px solid var(--text);
}

html[data-theme="cli"] .quoted-message-table > .translated,
html[data-theme="cli"] .quoted-message-table > .pending {
  position: relative;
  margin: 0;
  padding: 8px 10px 8px 32px;
}

html[data-theme="cli"] .row.peer .quoted-message-table > .translated::before,
html[data-theme="cli"] .row.peer .quoted-message-table > .pending::before {
  content: "●";
  position: absolute;
  inset-inline-start: 10px;
  color: var(--text);
}

html[data-theme="cli"] .row.self .quoted-message-table > .translated::before,
html[data-theme="cli"] .row.self .quoted-message-table > .pending::before {
  content: "❯";
  position: absolute;
  inset-inline-start: 9px;
  color: #d97757;
  font-weight: 700;
}

html[data-theme="cli"] .quoted-message-table > .origin {
  margin: 0;
  padding: 8px 10px 8px 32px;
  border-top: 1px solid #6d6960;
}

html[data-theme="cli"] .quoted-message-table > .origin::before {
  inset-inline-start: 10px;
}

html[data-theme="cli"] .quoted-message-table > .note,
html[data-theme="cli"] .quoted-message-table > .expl,
html[data-theme="cli"] .quoted-message-table > .expl-error,
html[data-theme="cli"] .quoted-message-table > .translation-failed {
  margin: 0;
  border-top: 1px solid #6d6960;
}

html[data-theme="cli"] .quote-preview {
  position: relative;
  padding-inline-start: 32px;
  border: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
}

html[data-theme="cli"] .quote-preview::before {
  content: "↳";
  position: absolute;
  inset-inline-start: 10px;
  color: var(--text);
}

html[data-theme="cli"] .quote-preview-content span {
  color: var(--cli-blue);
}

html[data-theme="cli"] .actions {
  margin-inline-start: 23px;
  gap: 8px;
}

html[data-theme="cli"] .actions button {
  min-height: 24px;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
}

html[data-theme="cli"] .actions button::before {
  content: "[";
  color: #817c73;
}

html[data-theme="cli"] .actions button::after {
  content: "]";
  color: #817c73;
}

html[data-theme="cli"] .quote-action {
  position: absolute;
  inset-inline-end: 0;
  top: 8px;
  z-index: 3;
  min-width: 52px;
  text-align: end;
}

html[data-theme="cli"] .outbox-status {
  margin-inline-start: 27px;
  color: var(--cli-blue);
}

html[data-theme="cli"] .read-receipt {
  inset-inline-start: auto;
  inset-inline-end: 3px;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #77736b;
}

html[data-theme="cli"] .receipt-envelope {
  display: none;
}

html[data-theme="cli"] .read-receipt-label {
  display: none;
}

html[data-theme="cli"] .read-receipt::before {
  content: "○";
}

html[data-theme="cli"] .read-receipt.is-read::before {
  content: "✓";
  color: var(--text);
}

html[data-theme="cli"] .note,
html[data-theme="cli"] .expl {
  position: relative;
  padding: 4px 8px 4px 25px;
  border-radius: 0;
  background: transparent;
  color: var(--cli-blue);
}

html[data-theme="cli"] .note::before {
  content: "※";
  position: absolute;
  inset-inline-start: 3px;
  color: var(--text);
}

html[data-theme="cli"] .expl::before {
  content: "⎿";
  position: absolute;
  inset-inline-start: 3px;
  color: var(--text);
}

html[data-theme="cli"] .cli-image-toggle {
  display: block;
  width: 100%;
  min-height: 24px;
  margin-bottom: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
}

html[data-theme="cli"] .cli-image-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

html[data-theme="cli"] .image-frame.cli-image-collapsed .image-content {
  display: none;
}

html[data-theme="cli"] .sticker-frame {
  height: auto;
  overflow: visible;
}

html[data-theme="cli"] .sticker-frame .image-content {
  width: 72px;
  height: 72px;
  overflow: hidden;
}

html[data-theme="cli"] .image-frame:not(.sticker-frame)::after {
  content: "└────────";
  display: block;
  color: #817c73;
  font-size: 12px;
}

html[data-theme="cli"] .image-frame.cli-image-collapsed::after {
  display: none;
}

html[data-theme="cli"] .video-frame::before {
  content: "┌─ @video";
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 12px;
}

html[data-theme="cli"] .file-card {
  border-inline-start: 2px solid var(--text);
}

html[data-theme="cli"] .composer {
  border-top: 1px solid #48463e;
  background: #1d1d1a;
}

html[data-theme="cli"] .composer-menu,
html[data-theme="cli"] .emoji-picker {
  border: 1px solid #48463e;
  border-radius: 2px;
  background: #171715;
  box-shadow: 8px 8px 0 rgba(0,0,0,.3);
}

html[data-theme="cli"] .inputrow {
  position: relative;
}

html[data-theme="cli"] .inputrow::before {
  content: "❯";
  position: absolute;
  z-index: 2;
  inset-inline-start: 58px;
  bottom: 10px;
  color: #d97757;
  font-weight: 800;
  pointer-events: none;
}

html[data-theme="cli"] #input {
  min-height: 44px;
  padding-inline-start: 30px;
  border-radius: 2px;
  background: #171715;
  caret-color: #d97757;
}

html[data-theme="cli"] .composer-toggle,
html[data-theme="cli"] .send {
  border-radius: 2px;
  font-size: 0;
}

html[data-theme="cli"] .composer-toggle::before {
  content: "/";
  color: var(--text);
  font-size: 22px;
}

html[data-theme="cli"] .send::before {
  content: "↵";
  color: #161a1f;
  font-size: 23px;
  font-weight: 800;
}

html[data-theme="cli"] .toolrow {
  margin: 5px -10px calc(-1 * clamp(3px, env(safe-area-inset-bottom), 12px));
  padding: 2px 8px calc(2px + env(safe-area-inset-bottom));
  border-top: 1px solid #343d49;
  background: #1a1d22;
  color: var(--text);
}

html[data-theme="cli"] .toolrow > button {
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: var(--text);
  font-size: 0;
}

html[data-theme="cli"] .toolrow > button svg,
html[data-theme="cli"] .send svg {
  display: none;
}

html[data-theme="cli"] .emoji-toggle::before {
  content: ":)";
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

html[data-theme="cli"] .image-toggle::before {
  content: "@";
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
}

html[data-theme="cli"] .voice-toggle::before {
  content: "~";
  color: var(--text);
  font-size: 23px;
  font-weight: 700;
}

html[data-theme="cli"] .advisor-toggle::before {
  content: "✦";
  color: var(--text);
  font-size: 18px;
}

html[data-theme="cli"] .history-toggle::before {
  content: "↺";
  color: var(--text);
  font-size: 20px;
}

html[data-theme="cli"] .toolrow > button:hover,
html[data-theme="cli"] .toolrow > button[aria-expanded="true"] {
  background: #242b34;
  color: #9ac4ff;
}

html[data-theme="cli"] .toolrow .state {
  color: #aaa59c;
  font-weight: 650;
}

html[data-theme="cli"] #view-chat .chat-peer-avatar {
  border: 0;
  background: transparent !important;
  color: var(--text);
  font-size: 0;
}

html[data-theme="cli"] #view-chat .chat-peer-avatar::before {
  content: "@";
  font-size: 18px;
  font-weight: 700;
}

html[data-theme="cli"] #view-chat .chat-peer-avatar > * {
  display: none;
}

html[data-theme="cli"] .account-scroll,
html[data-theme="cli"] .admin-scroll,
html[data-theme="cli"] .peer-profile-scroll {
  background: #171715;
}

html[data-theme="cli"] .profile-card,
html[data-theme="cli"] .peer-profile-card,
html[data-theme="cli"] .admin-form,
html[data-theme="cli"] .audit-card {
  border: 1px solid #48463e;
  border-radius: 2px;
  background: #1d1d1a;
  box-shadow: 7px 7px 0 #11110f;
}

html[data-theme="cli"] .profile-card > label::before {
  content: "# ";
  color: #d97757;
}

html[data-theme="cli"] #account-theme {
  border-color: #d97757;
  color: #e58a68;
}

html[data-theme="cli"] #notification-center {
  background: rgba(8,8,7,.78);
}

html[data-theme="cli"] .notification-card,
html[data-theme="cli"] .notification-box {
  border: 1px solid #48463e;
  border-radius: 2px;
  background: #1d1d1a;
  box-shadow: 10px 10px 0 #11110f;
}

html[data-theme="cli"] .notification-list li {
  border-color: #3a3933;
  border-radius: 0;
  background: #171715;
}

html[data-theme="cli"] .notification-setting {
  border: 1px solid #4c4038;
  border-radius: 2px;
  background: #2b231f;
}

html[data-theme="cli"] .file-card {
  border: 1px solid #5a554c;
  border-radius: 2px;
  background: #1d1d1a;
}

html[data-theme="cli"] .file-card-icon {
  border-radius: 1px;
  background: #33261f;
  color: #e58a68;
}

html[data-theme="cli"] .chat-image,
html[data-theme="cli"] .chat-video,
html[data-theme="cli"] .video-play {
  border: 1px solid #5a554c;
  border-radius: 2px;
}

html[data-theme="cli"] .sheet {
  background: rgba(8,8,7,.8);
}

html[data-theme="cli"] .sheet-box {
  border: 1px solid #48463e;
  border-radius: 2px;
  background: #1d1d1a;
  box-shadow: 10px 10px 0 #11110f;
}

html[data-theme="cli"] .history-controls,
html[data-theme="cli"] .history-list,
html[data-theme="cli"] .advisor-thread {
  background: #171715;
}

html[data-theme="cli"] .history-item,
html[data-theme="cli"] .advisor-bubble {
  border-radius: 2px;
  background: #1d1d1a;
  box-shadow: none;
}

html[data-theme="cli"] .language-menu,
html[data-theme="cli"] .sticker-message-menu {
  border: 1px solid #48463e;
  border-radius: 2px;
  background: #1d1d1a;
  box-shadow: 7px 7px 0 #11110f;
}

html[data-theme="cli"] .update-loading,
html[data-theme="cli"] .message-sync {
  border-color: #48463e;
  border-radius: 2px;
  background: #1d1d1a;
}
