Spaces:

ihatebaselines
/

purcar-chat-api

Runtime error

Deploy Purcar gateway and local model engine

f71d0a0 verified about 2 months ago

9.24 kB

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

/* ─── MONOCHROME TERMINAL DESIGN SYSTEM ─── */
:root {
  --bg: #201d1d;
  --bg-secondary: #1a1717;
  --bg-hover: #2a2626;
  --bg-active: #302c2c;
  --border: rgba(245, 240, 235, 0.10);
  --border-strong: rgba(245, 240, 235, 0.20);
  --text: #f5f0eb;
  --text-muted: rgba(245, 240, 235, 0.45);
  --text-dim: rgba(245, 240, 235, 0.25);
  --accent: #f5f0eb;
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* The official logo has a black canvas; screen blending lets it sit cleanly on the site background. */
img[src="/purcar-logo.png"] { mix-blend-mode: screen; }

/* Typography */
h1, h2, h3, h4, h5, h6, p, span, label, button, input, textarea, select, a, li {
  font-family: var(--font) !important;
  letter-spacing: -0.01em;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 240, 235, 0.35); }

/* Selection */
::selection { background: rgba(245, 240, 235, 0.15); color: var(--text); }

/* Borders */
.border-mono { border: 1px solid var(--border); }
.border-mono-strong { border: 1px solid var(--border-strong); }

/* Input reset */
input, textarea {
  background: transparent;
  color: var(--text);
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-dim);
  font-family: var(--font) !important;
}

/* Sidebar panel */
.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

/* Chat message bubbles */
.msg-user {
  background: rgba(245, 240, 235, 0.075);
  border: 1px solid var(--border);
  border-radius: 12px 12px 4px 12px;
  min-width: 72px;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.msg-assistant {
  background: transparent;
}

/* Terminal caret blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.caret { animation: blink 1.2s step-end infinite; }

.mobile-menu { display:none; background:transparent; border:1px solid rgba(245,240,235,.12); color:#f5f0eb; border-radius:5px; padding:5px; cursor:pointer; }
.styled-dialog-backdrop { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.styled-dialog { width:min(100%,430px); padding:22px; color:#f5f0eb; background:#1a1717; border:1px solid rgba(245,240,235,.18); border-radius:10px; box-shadow:0 24px 80px rgba(0,0,0,.55); font-family:var(--font); }
.styled-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.styled-dialog-kicker { color:#a0e4a0; font-size:9px; letter-spacing:.12em; }
.styled-dialog h2 { margin:5px 0 0; font-size:16px; }
.styled-dialog-copy { color:rgba(245,240,235,.48); font-size:11px; margin:14px 0; }
.styled-dialog-input { width:100%; box-sizing:border-box; padding:11px 12px; color:#f5f0eb; background:#201d1d; border:1px solid rgba(245,240,235,.16); border-radius:6px; outline:none; font:inherit; font-size:12px; }
.styled-dialog-input:focus { border-color:#a0e4a0; box-shadow:0 0 0 3px rgba(160,228,160,.1); }
.styled-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.dialog-cancel,.dialog-submit,.icon-button { font:inherit; cursor:pointer; border-radius:6px; padding:8px 12px; }
.dialog-cancel,.icon-button { color:rgba(245,240,235,.6); background:transparent; border:1px solid rgba(245,240,235,.12); }
.dialog-submit { color:#201d1d; background:#a0e4a0; border:1px solid #a0e4a0; font-weight:700; }
.conversation-tabs { display:flex; gap:4px; padding:5px 2px 7px; border-bottom:1px solid rgba(245,240,235,.06); margin-bottom:3px; }
.conversation-tabs button { display:flex; align-items:center; gap:4px; color:rgba(245,240,235,.42); background:transparent; border:1px solid transparent; border-radius:5px; padding:5px 7px; font:inherit; font-size:10px; cursor:pointer; }
.conversation-tabs button.active { color:#f5f0eb; background:rgba(245,240,235,.08); border-color:rgba(245,240,235,.1); }
.invite-panel { margin:6px 8px; padding:8px; border:1px solid rgba(160,228,160,.22); border-radius:7px; background:rgba(160,228,160,.06); }
.invite-panel-title { display:flex; align-items:center; gap:5px; color:#a0e4a0; font-size:10px; font-weight:600; }
.invite-panel-title span { margin-left:auto; min-width:16px; text-align:center; border-radius:10px; background:#a0e4a0; color:#201d1d; font-size:9px; }
.invite-item { margin-top:8px; padding-top:7px; border-top:1px solid rgba(245,240,235,.1); }
.invite-title { color:#f5f0eb; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invite-copy { color:rgba(245,240,235,.45); font-size:9px; line-height:1.4; margin-top:3px; }
.invite-actions { display:flex; gap:5px; margin-top:7px; }
.invite-actions button { flex:1; padding:5px; border-radius:4px; border:1px solid rgba(245,240,235,.14); background:rgba(245,240,235,.07); color:#f5f0eb; font:inherit; font-size:9px; cursor:pointer; }
.invite-actions button:first-child { color:#201d1d; background:#a0e4a0; border-color:#a0e4a0; }

@media (max-width: 760px) {
  .mobile-menu { display:inline-flex; align-items:center; justify-content:center; }
  .app-sidebar { position:fixed; z-index:60; inset:0 auto 0 0; transform:translateX(-105%); transition:transform .2s ease; box-shadow:12px 0 40px rgba(0,0,0,.45); }
  .app-sidebar.is-open { transform:translateX(0); }
  .app-header { padding:0 10px !important; }
  .settings-modal { max-width:calc(100vw - 24px) !important; max-height:92vh !important; padding:16px !important; }
}

/* Thinking trace */
.think-block {
  border-left: 2px solid var(--border-strong);
  background: rgba(245, 240, 235, 0.02);
}

/* Code block */
.code-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Hover states */
.hover-row:hover { background: var(--bg-hover); }
.hover-item:hover { background: rgba(245, 240, 235, 0.05); }

/* RAG badge */
.rag-badge {
  background: rgba(245, 240, 235, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}

/* Active state */
.active-item { background: var(--bg-active); }

/* Grid system 8px */
.grid-8 { display: grid; gap: 8px; }
.grid-16 { display: grid; gap: 16px; }

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.2s ease-out forwards; }

/* Thinking pulse */
@keyframes thinkPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.think-pulse { animation: thinkPulse 1.5s ease-in-out infinite; }

/* Dot bounce (thinking indicator) */
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
.dot-bounce {
  display: inline-block;
  animation: dotBounce 1.2s ease-in-out infinite;
  color: #a0e4a0;
  font-size: 16px;
  line-height: 1;
}

/* Spin for loading */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Think line fade-in */
.think-line {
  animation: fadeIn 0.15s ease-out forwards;
}

/* Think block scrollbar */
.think-scroll::-webkit-scrollbar { width: 3px; }
.think-scroll::-webkit-scrollbar-thumb { background: rgba(245,240,235,0.1); }

/* ─── DISCORD SPOILER UX ─── */
.discord-spoiler {
  background-color: #121010;
  color: transparent !important;
  border-radius: 3px;
  cursor: pointer;
  padding: 1px 4px;
  user-select: none;
  transition: all 0.15s ease-in-out;
  border: 1px solid rgba(245, 240, 235, 0.08);
  display: inline-block;
}

.discord-spoiler:hover:not(.revealed) {
  background-color: #181515;
}

.discord-spoiler.revealed {
  background-color: rgba(245, 240, 235, 0.07);
  color: inherit !important;
  user-select: text;
  border-color: rgba(245, 240, 235, 0.15);
}

/* ─── DISCORD MENTION PILL ─── */
.mention-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(160, 228, 160, 0.12);
  color: #a0e4a0;
  border: 1px solid rgba(160, 228, 160, 0.25);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 500;
  margin: 0 2px;
  vertical-align: baseline;
}

/* ─── INLINE CODE ─── */
.inline-code {
  background: rgba(245, 240, 235, 0.08);
  border: 1px solid rgba(245, 240, 235, 0.12);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
  color: #f5f0eb;
}

/* ─── FLOATING ACTIONS BAR ─── */
.msg-actions-bar {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
	@import "tailwindcss";

	/* ─── MONOCHROME TERMINAL DESIGN SYSTEM ─── */
	:root {
	--bg: #201d1d;
	--bg-secondary: #1a1717;
	--bg-hover: #2a2626;
	--bg-active: #302c2c;
	--border: rgba(245, 240, 235, 0.10);
	--border-strong: rgba(245, 240, 235, 0.20);
	--text: #f5f0eb;
	--text-muted: rgba(245, 240, 235, 0.45);
	--text-dim: rgba(245, 240, 235, 0.25);
	--accent: #f5f0eb;
	--font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	}

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	html {
	font-size: 13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	body {
	font-family: var(--font);
	background-color: var(--bg);
	color: var(--text);
	overflow-x: hidden;
	}

	/* The official logo has a black canvas; screen blending lets it sit cleanly on the site background. */
	img[src="/purcar-logo.png"] { mix-blend-mode: screen; }

	/* Typography */
	h1, h2, h3, h4, h5, h6, p, span, label, button, input, textarea, select, a, li {
	font-family: var(--font) !important;
	letter-spacing: -0.01em;
	}

	/* Scrollbar */
	::-webkit-scrollbar { width: 4px; height: 4px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
	::-webkit-scrollbar-thumb:hover { background: rgba(245, 240, 235, 0.35); }

	/* Selection */
	::selection { background: rgba(245, 240, 235, 0.15); color: var(--text); }

	/* Borders */
	.border-mono { border: 1px solid var(--border); }
	.border-mono-strong { border: 1px solid var(--border-strong); }

	/* Input reset */
	input, textarea {
	background: transparent;
	color: var(--text);
	border: none;
	outline: none;
	resize: none;
	font-family: var(--font) !important;
	}

	input::placeholder, textarea::placeholder {
	color: var(--text-dim);
	font-family: var(--font) !important;
	}

	/* Sidebar panel */
	.sidebar {
	background: var(--bg-secondary);
	border-right: 1px solid var(--border);
	}

	/* Chat message bubbles */
	.msg-user {
	background: rgba(245, 240, 235, 0.075);
	border: 1px solid var(--border);
	border-radius: 12px 12px 4px 12px;
	min-width: 72px;
	overflow-wrap: anywhere;
	box-shadow: 0 8px 22px rgba(0,0,0,.12);
	}

	.msg-assistant {
	background: transparent;
	}

	/* Terminal caret blink */
	@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
	}
	.caret { animation: blink 1.2s step-end infinite; }

	.mobile-menu { display:none; background:transparent; border:1px solid rgba(245,240,235,.12); color:#f5f0eb; border-radius:5px; padding:5px; cursor:pointer; }
	.styled-dialog-backdrop { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
	.styled-dialog { width:min(100%,430px); padding:22px; color:#f5f0eb; background:#1a1717; border:1px solid rgba(245,240,235,.18); border-radius:10px; box-shadow:0 24px 80px rgba(0,0,0,.55); font-family:var(--font); }
	.styled-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
	.styled-dialog-kicker { color:#a0e4a0; font-size:9px; letter-spacing:.12em; }
	.styled-dialog h2 { margin:5px 0 0; font-size:16px; }
	.styled-dialog-copy { color:rgba(245,240,235,.48); font-size:11px; margin:14px 0; }
	.styled-dialog-input { width:100%; box-sizing:border-box; padding:11px 12px; color:#f5f0eb; background:#201d1d; border:1px solid rgba(245,240,235,.16); border-radius:6px; outline:none; font:inherit; font-size:12px; }
	.styled-dialog-input:focus { border-color:#a0e4a0; box-shadow:0 0 0 3px rgba(160,228,160,.1); }
	.styled-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
	.dialog-cancel,.dialog-submit,.icon-button { font:inherit; cursor:pointer; border-radius:6px; padding:8px 12px; }
	.dialog-cancel,.icon-button { color:rgba(245,240,235,.6); background:transparent; border:1px solid rgba(245,240,235,.12); }
	.dialog-submit { color:#201d1d; background:#a0e4a0; border:1px solid #a0e4a0; font-weight:700; }
	.conversation-tabs { display:flex; gap:4px; padding:5px 2px 7px; border-bottom:1px solid rgba(245,240,235,.06); margin-bottom:3px; }
	.conversation-tabs button { display:flex; align-items:center; gap:4px; color:rgba(245,240,235,.42); background:transparent; border:1px solid transparent; border-radius:5px; padding:5px 7px; font:inherit; font-size:10px; cursor:pointer; }
	.conversation-tabs button.active { color:#f5f0eb; background:rgba(245,240,235,.08); border-color:rgba(245,240,235,.1); }
	.invite-panel { margin:6px 8px; padding:8px; border:1px solid rgba(160,228,160,.22); border-radius:7px; background:rgba(160,228,160,.06); }
	.invite-panel-title { display:flex; align-items:center; gap:5px; color:#a0e4a0; font-size:10px; font-weight:600; }
	.invite-panel-title span { margin-left:auto; min-width:16px; text-align:center; border-radius:10px; background:#a0e4a0; color:#201d1d; font-size:9px; }
	.invite-item { margin-top:8px; padding-top:7px; border-top:1px solid rgba(245,240,235,.1); }
	.invite-title { color:#f5f0eb; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.invite-copy { color:rgba(245,240,235,.45); font-size:9px; line-height:1.4; margin-top:3px; }
	.invite-actions { display:flex; gap:5px; margin-top:7px; }
	.invite-actions button { flex:1; padding:5px; border-radius:4px; border:1px solid rgba(245,240,235,.14); background:rgba(245,240,235,.07); color:#f5f0eb; font:inherit; font-size:9px; cursor:pointer; }
	.invite-actions button:first-child { color:#201d1d; background:#a0e4a0; border-color:#a0e4a0; }

	@media (max-width: 760px) {
	.mobile-menu { display:inline-flex; align-items:center; justify-content:center; }
	.app-sidebar { position:fixed; z-index:60; inset:0 auto 0 0; transform:translateX(-105%); transition:transform .2s ease; box-shadow:12px 0 40px rgba(0,0,0,.45); }
	.app-sidebar.is-open { transform:translateX(0); }
	.app-header { padding:0 10px !important; }
	.settings-modal { max-width:calc(100vw - 24px) !important; max-height:92vh !important; padding:16px !important; }
	}

	/* Thinking trace */
	.think-block {
	border-left: 2px solid var(--border-strong);
	background: rgba(245, 240, 235, 0.02);
	}

	/* Code block */
	.code-block {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 4px;
	}

	/* Hover states */
	.hover-row:hover { background: var(--bg-hover); }
	.hover-item:hover { background: rgba(245, 240, 235, 0.05); }

	/* RAG badge */
	.rag-badge {
	background: rgba(245, 240, 235, 0.05);
	border: 1px solid var(--border-strong);
	border-radius: 2px;
	}

	/* Active state */
	.active-item { background: var(--bg-active); }

	/* Grid system 8px */
	.grid-8 { display: grid; gap: 8px; }
	.grid-16 { display: grid; gap: 16px; }

	/* Fade in */
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
	}
	.fade-in { animation: fadeIn 0.2s ease-out forwards; }

	/* Thinking pulse */
	@keyframes thinkPulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
	}
	.think-pulse { animation: thinkPulse 1.5s ease-in-out infinite; }

	/* Dot bounce (thinking indicator) */
	@keyframes dotBounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
	40% { transform: translateY(-4px); opacity: 1; }
	}
	.dot-bounce {
	display: inline-block;
	animation: dotBounce 1.2s ease-in-out infinite;
	color: #a0e4a0;
	font-size: 16px;
	line-height: 1;
	}

	/* Spin for loading */
	@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

	/* Think line fade-in */
	.think-line {
	animation: fadeIn 0.15s ease-out forwards;
	}

	/* Think block scrollbar */
	.think-scroll::-webkit-scrollbar { width: 3px; }
	.think-scroll::-webkit-scrollbar-thumb { background: rgba(245,240,235,0.1); }

	/* ─── DISCORD SPOILER UX ─── */
	.discord-spoiler {
	background-color: #121010;
	color: transparent !important;
	border-radius: 3px;
	cursor: pointer;
	padding: 1px 4px;
	user-select: none;
	transition: all 0.15s ease-in-out;
	border: 1px solid rgba(245, 240, 235, 0.08);
	display: inline-block;
	}

	.discord-spoiler:hover:not(.revealed) {
	background-color: #181515;
	}

	.discord-spoiler.revealed {
	background-color: rgba(245, 240, 235, 0.07);
	color: inherit !important;
	user-select: text;
	border-color: rgba(245, 240, 235, 0.15);
	}

	/* ─── DISCORD MENTION PILL ─── */
	.mention-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: rgba(160, 228, 160, 0.12);
	color: #a0e4a0;
	border: 1px solid rgba(160, 228, 160, 0.25);
	border-radius: 4px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 500;
	margin: 0 2px;
	vertical-align: baseline;
	}

	/* ─── INLINE CODE ─── */
	.inline-code {
	background: rgba(245, 240, 235, 0.08);
	border: 1px solid rgba(245, 240, 235, 0.12);
	border-radius: 3px;
	padding: 1px 5px;
	font-size: 11px;
	font-family: inherit;
	color: #f5f0eb;
	}

	/* ─── FLOATING ACTIONS BAR ─── */
	.msg-actions-bar {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	}