/* =====================================================================
 * code-highlight.css — syntax colours + HTML preview for chat code blocks
 * Palette follows a VS Code "Dark+" feel: purple keywords, blue functions,
 * gold methods/constants, orange strings and numbers.
 * ===================================================================== */

.code-block-wrap {
  --tk-kw: #c792ea;      /* const, if, return, await            */
  --tk-fn: #6cb2ff;      /* function calls                       */
  --tk-meth: #e5c07b;    /* .map  .filter  .slice                */
  --tk-type: #82c8ff;    /* String, Promise, classes             */
  --tk-var: #e6e8ee;     /* variables                            */
  --tk-prop: #f2a65a;    /* object properties, CSS properties    */
  --tk-const: #e5c07b;   /* REDDIT_MAX_POSTS                     */
  --tk-str: #d9a066;     /* "strings" and `templates`            */
  --tk-num: #f0b36b;     /* 0  200  #fff                         */
  --tk-lit: #5aa9ff;     /* null  true  undefined                */
  --tk-op: #6cb2ff;      /* =>  ===  ||                          */
  --tk-pn: #aab2c0;      /* ( ) { } ; ,                          */
  --tk-cm: #6f7a8a;      /* comments                             */
  --tk-tag: #ff7b8a;     /* <div>                                */
  --tk-attr: #f2a65a;    /* class= id=                           */
  --tk-interp: #e06ccf;  /* ${ }                                 */
  --tk-sel: #e5c07b;     /* CSS selectors                        */
  --tk-at: #c792ea;      /* @media                               */
}

.theme-light .code-block-wrap {
  --tk-kw: #8a3fc2;
  --tk-fn: #1e66d0;
  --tk-meth: #946b00;
  --tk-type: #0f6fb0;
  --tk-var: #24292f;
  --tk-prop: #b45a00;
  --tk-const: #946b00;
  --tk-str: #a5551a;
  --tk-num: #b45a00;
  --tk-lit: #0b5fd0;
  --tk-op: #1e66d0;
  --tk-pn: #57606a;
  --tk-cm: #8a949e;
  --tk-tag: #c0243a;
  --tk-attr: #b45a00;
  --tk-interp: #b0239b;
  --tk-sel: #946b00;
  --tk-at: #8a3fc2;
}

.code-block-wrap pre code { color: var(--tk-var); }
.tk-kw { color: var(--tk-kw); }
.tk-fn { color: var(--tk-fn); }
.tk-meth { color: var(--tk-meth); }
.tk-type { color: var(--tk-type); }
.tk-var { color: var(--tk-var); }
.tk-prop { color: var(--tk-prop); }
.tk-const { color: var(--tk-const); }
.tk-str, .tk-tpl { color: var(--tk-str); }
.tk-num { color: var(--tk-num); }
.tk-lit { color: var(--tk-lit); }
.tk-op { color: var(--tk-op); }
.tk-pn { color: var(--tk-pn); }
.tk-cm { color: var(--tk-cm); font-style: italic; }
.tk-tag { color: var(--tk-tag); }
.tk-attr { color: var(--tk-attr); }
.tk-interp { color: var(--tk-interp); }
.tk-sel { color: var(--tk-sel); }
.tk-at { color: var(--tk-at); }
.tk-rx { color: #7ad1b1; }
.tk-opt { color: var(--tk-prop); }

/* ---- header: language label on the left, tools on the right ---- */
.code-block-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.code-tabs {
  display: inline-flex;
  border: 1px solid var(--chat-border);
  border-radius: 7px;
  overflow: hidden;
  margin-right: 4px;
}

.code-tab {
  border: none;
  background: transparent;
  color: var(--chat-text-dim);
  font-family: var(--chat-font);
  font-size: 10.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.code-tab:hover { color: var(--chat-text); }
.code-tab.active {
  background: var(--chat-surface-hover);
  color: var(--chat-text);
  font-weight: 600;
}

.code-block-expand {
  border: none;
  background: transparent;
  color: var(--chat-text-dim);
  cursor: pointer;
  font-family: var(--chat-font);
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 6px;
}
.code-block-expand:hover { background: var(--chat-surface-hover); color: var(--chat-text); }

/* ---- preview pane ---- */
.code-preview-pane { display: none; }
.code-block-wrap.is-previewing > pre { display: none; }
.code-block-wrap.is-previewing > .code-preview-pane { display: block; }

.code-preview-frame {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  background: #fff;       /* generated pages assume a white canvas */
  color-scheme: light;
}

/* ---- full-screen preview ---- */
.code-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
}

.code-preview-modal {
  display: flex;
  flex-direction: column;
  width: min(1200px, 100%);
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--chat-bg, #111);
  border: 1px solid var(--chat-border);
}

.code-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-family: var(--chat-font);
  font-size: 13px;
  color: var(--chat-text);
  background: var(--chat-surface);
  border-bottom: 1px solid var(--chat-border);
}

.code-preview-close {
  border: none;
  background: transparent;
  color: var(--chat-text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.code-preview-close:hover { background: var(--chat-surface-hover); color: var(--chat-text); }

.code-preview-modal .code-preview-frame { flex: 1; height: auto; }

@media (max-width: 600px) {
  .code-preview-frame { height: 340px; }
  .code-preview-overlay { padding: 0; }
  .code-preview-modal { border-radius: 0; }
  .code-block-expand { display: none; }
}