a-autonomous-ai-agent-called-leone-ai

repository

loading code, commits, and activity

repositories

loading repo index

#1	:root {
#2	color-scheme: dark;
#3	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
#4	line-height: 1.5;
#5	--bg-primary: #0a0a0a;
#6	--bg-secondary: #111111;
#7	--bg-tertiary: #1a1a1a;
#8	--bg-hover: #222222;
#9	--border-color: rgba(255, 255, 255, 0.08);
#10	--border-active: rgba(255, 255, 255, 0.15);
#11	--text-primary: #fafafa;
#12	--text-secondary: rgba(255, 255, 255, 0.65);
#13	--text-muted: rgba(255, 255, 255, 0.4);
#14	--accent: #6366f1;
#15	--accent-hover: #818cf8;
#16	--accent-glow: rgba(99, 102, 241, 0.15);
#17	--success: #22c55e;
#18	--warning: #eab308;
#19	--error: #ef4444;
#20	--radius: 0.5rem;
#21	--radius-lg: 0.75rem;
#22	}
#23
#24	* {
#25	box-sizing: border-box;
#26	margin: 0;
#27	padding: 0;
#28	}
#29
#30	html, body, #root {
#31	min-height: 100vh;
#32	background: var(--bg-primary);
#33	color: var(--text-primary);
#34	}
#35
#36	/* App Layout */
#37	.app {
#38	display: grid;
#39	grid-template-columns: 280px 1fr;
#40	grid-template-rows: 1fr;
#41	height: 100vh;
#42	overflow: hidden;
#43	}
#44
#45	/* Sidebar */
#46	.sidebar {
#47	background: var(--bg-secondary);
#48	border-right: 1px solid var(--border-color);
#49	display: flex;
#50	flex-direction: column;
#51	overflow: hidden;
#52	}
#53
#54	.sidebar-header {
#55	padding: 1.25rem 1rem;
#56	border-bottom: 1px solid var(--border-color);
#57	display: flex;
#58	align-items: center;
#59	gap: 0.75rem;
#60	}
#61
#62	.logo-icon {
#63	width: 36px;
#64	height: 36px;
#65	background: linear-gradient(135deg, var(--accent), #a855f7);
#66	border-radius: 10px;
#67	display: flex;
#68	align-items: center;
#69	justify-content: center;
#70	font-weight: 700;
#71	font-size: 1rem;
#72	color: white;
#73	flex-shrink: 0;
#74	}
#75
#76	.logo-text h1 {
#77	font-size: 1rem;
#78	font-weight: 600;
#79	letter-spacing: -0.01em;
#80	line-height: 1.2;
#81	}
#82
#83	.logo-text span {
#84	font-size: 0.7rem;
#85	color: var(--text-muted);
#86	text-transform: uppercase;
#87	letter-spacing: 0.08em;
#88	}
#89
#90	.new-chat-btn {
#91	margin: 0.75rem 1rem;
#92	padding: 0.6rem 1rem;
#93	background: var(--accent);
#94	color: white;
#95	border: none;
#96	border-radius: var(--radius);
#97	font-size: 0.85rem;
#98	font-weight: 500;
#99	cursor: pointer;
#100	display: flex;
#101	align-items: center;
#102	gap: 0.5rem;
#103	transition: background 0.15s;
#104	}
#105
#106	.new-chat-btn:hover {
#107	background: var(--accent-hover);
#108	}
#109
#110	/* Chain Selector */
#111	.chain-selector {
#112	display: flex;
#113	gap: 0.25rem;
#114	padding: 0.5rem 0.75rem;
#115	overflow-x: auto;
#116	scrollbar-width: none;
#117	}
#118
#119	.chain-selector::-webkit-scrollbar {
#120	display: none;
#121	}
#122
#123	.chain-btn {
#124	padding: 0.3rem 0.6rem;
#125	background: transparent;
#126	color: var(--text-muted);
#127	border: 1px solid var(--border-color);
#128	border-radius: 999px;
#129	font-size: 0.7rem;
#130	cursor: pointer;
#131	white-space: nowrap;
#132	transition: all 0.15s;
#133	font-family: inherit;
#134	}
#135
#136	.chain-btn:hover {
#137	color: var(--text-primary);
#138	border-color: var(--border-active);
#139	}
#140
#141	.chain-btn.active {
#142	background: var(--accent-glow);
#143	color: var(--accent);
#144	border-color: var(--accent);
#145	}
#146
#147	/* Sidebar Nav */
#148	.sidebar-nav {
#149	display: flex;
#150	gap: 0.25rem;
#151	padding: 0.5rem 0.75rem;
#152	border-bottom: 1px solid var(--border-color);
#153	}
#154
#155	.nav-btn {
#156	flex: 1;
#157	padding: 0.45rem 0.5rem;
#158	background: transparent;
#159	color: var(--text-muted);
#160	border: 1px solid transparent;
#161	border-radius: var(--radius);
#162	font-size: 0.75rem;
#163	cursor: pointer;
#164	display: flex;
#165	align-items: center;
#166	justify-content: center;
#167	gap: 0.35rem;
#168	transition: all 0.15s;
#169	font-family: inherit;
#170	}
#171
#172	.nav-btn:hover {
#173	background: var(--bg-hover);
#174	color: var(--text-primary);
#175	}
#176
#177	.nav-btn.active {
#178	background: var(--bg-tertiary);
#179	color: var(--text-primary);
#180	border-color: var(--border-active);
#181	}
#182
#183	.conversations-label {
#184	font-size: 0.7rem;
#185	text-transform: uppercase;
#186	letter-spacing: 0.08em;
#187	color: var(--text-muted);
#188	padding: 0.5rem 1rem 0.25rem;
#189	}
#190
#191	.conversations-list {
#192	flex: 1;
#193	overflow-y: auto;
#194	padding: 0.25rem 0.5rem;
#195	min-height: 0;
#196	}
#197
#198	.conv-item {
#199	padding: 0.6rem 0.75rem;
#200	border-radius: var(--radius);
#201	cursor: pointer;
#202	font-size: 0.85rem;
#203	color: var(--text-secondary);
#204	display: flex;
#205	align-items: center;
#206	gap: 0.5rem;
#207	transition: all 0.12s;
#208	border: 1px solid transparent;
#209	margin-bottom: 2px;
#210	}
#211
#212	.conv-item:hover {
#213	background: var(--bg-hover);
#214	color: var(--text-primary);
#215	}
#216
#217	.conv-item.active {
#218	background: var(--bg-tertiary);
#219	color: var(--text-primary);
#220	border-color: var(--border-active);
#221	}
#222
#223	.conv-item .conv-icon {
#224	flex-shrink: 0;
#225	opacity: 0.5;
#226	}
#227
#228	.conv-item .conv-title {
#229	overflow: hidden;
#230	text-overflow: ellipsis;
#231	white-space: nowrap;
#232	}
#233
#234	/* Deployed Agents Panel */
#235	.deployed-panel {
#236	border-top: 1px solid var(--border-color);
#237	padding: 0.5rem 0;
#238	max-height: 180px;
#239	overflow-y: auto;
#240	}
#241
#242	.deployed-header {
#243	display: flex;
#244	align-items: center;
#245	justify-content: space-between;
#246	padding: 0.25rem 1rem 0.5rem;
#247	}
#248
#249	.deployed-title {
#250	font-size: 0.7rem;
#251	text-transform: uppercase;
#252	letter-spacing: 0.08em;
#253	color: var(--text-muted);
#254	}
#255
#256	.deployed-count {
#257	font-size: 0.65rem;
#258	background: var(--accent-glow);
#259	color: var(--accent);
#260	padding: 0.1rem 0.4rem;
#261	border-radius: 999px;
#262	font-weight: 600;
#263	}
#264
#265	.deployed-list {
#266	padding: 0 0.5rem;
#267	}
#268
#269	.deployed-item {
#270	padding: 0.5rem 0.5rem;
#271	border-radius: var(--radius);
#272	cursor: pointer;
#273	transition: background 0.12s;
#274	margin-bottom: 2px;
#275	}
#276
#277	.deployed-item:hover {
#278	background: var(--bg-hover);
#279	}
#280
#281	.deployed-row-top {
#282	display: flex;
#283	align-items: center;
#284	justify-content: space-between;
#285	margin-bottom: 0.2rem;
#286	}
#287
#288	.deployed-name {
#289	font-size: 0.8rem;
#290	font-weight: 500;
#291	color: var(--text-primary);
#292	overflow: hidden;
#293	text-overflow: ellipsis;
#294	white-space: nowrap;
#295	}
#296
#297	.deployed-status {
#298	font-size: 0.6rem;
#299	padding: 0.1rem 0.4rem;
#300	border-radius: 999px;
#301	text-transform: uppercase;
#302	letter-spacing: 0.05em;
#303	font-weight: 600;
#304	flex-shrink: 0;
#305	}
#306
#307	.deployed-status.active {
#308	background: rgba(34, 197, 94, 0.15);
#309	color: var(--success);
#310	}
#311
#312	.deployed-status.deploying {
#313	background: rgba(234, 179, 8, 0.15);
#314	color: var(--warning);
#315	}
#316
#317	.deployed-status.paused {
#318	background: rgba(239, 68, 68, 0.15);
#319	color: var(--error);
#320	}
#321
#322	.deployed-row-bottom {
#323	display: flex;
#324	gap: 0.75rem;
#325	font-size: 0.7rem;
#326	color: var(--text-muted);
#327	}
#328
#329	.deployed-chain {
#330	color: var(--text-secondary);
#331	}
#332
#333	/* Agent Status */
#334	.agent-status {
#335	padding: 0.75rem 1rem;
#336	border-top: 1px solid var(--border-color);
#337	display: flex;
#338	align-items: center;
#339	gap: 0.5rem;
#340	font-size: 0.8rem;
#341	color: var(--text-secondary);
#342	}
#343
#344	.status-dot {
#345	width: 8px;
#346	height: 8px;
#347	border-radius: 50%;
#348	background: var(--success);
#349	animation: pulse 2s infinite;
#350	}
#351
#352	.status-dot.idle {
#353	background: var(--success);
#354	}
#355
#356	.status-dot.thinking {
#357	background: var(--warning);
#358	animation: pulse 0.8s infinite;
#359	}
#360
#361	.status-dot.error {
#362	background: var(--error);
#363	animation: none;
#364	}
#365
#366	@keyframes pulse {
#367	0%, 100% { opacity: 1; }
#368	50% { opacity: 0.5; }
#369	}
#370
#371	/* Main Content */
#372	.main-content {
#373	display: flex;
#374	flex-direction: column;
#375	height: 100vh;
#376	overflow: hidden;
#377	}
#378
#379	/* Header */
#380	.header {
#381	padding: 0.75rem 1.5rem;
#382	border-bottom: 1px solid var(--border-color);
#383	display: flex;
#384	align-items: center;
#385	justify-content: space-between;
#386	background: var(--bg-secondary);
#387	min-height: 52px;
#388	}
#389
#390	.header-title {
#391	font-size: 0.9rem;
#392	font-weight: 500;
#393	}
#394
#395	.header-actions {
#396	display: flex;
#397	gap: 0.5rem;
#398	}
#399
#400	.header-btn {
#401	padding: 0.4rem 0.75rem;
#402	background: transparent;
#403	color: var(--text-secondary);
#404	border: 1px solid var(--border-color);
#405	border-radius: var(--radius);
#406	font-size: 0.8rem;
#407	cursor: pointer;
#408	transition: all 0.15s;
#409	display: flex;
#410	align-items: center;
#411	gap: 0.4rem;
#412	font-family: inherit;
#413	}
#414
#415	.header-btn:hover {
#416	background: var(--bg-hover);
#417	color: var(--text-primary);
#418	border-color: var(--border-active);
#419	}
#420
#421	/* Network Status Bar */
#422	.network-bar {
#423	display: flex;
#424	gap: 1.5rem;
#425	padding: 0.45rem 1.5rem;
#426	background: var(--bg-primary);
#427	border-bottom: 1px solid var(--border-color);
#428	font-size: 0.72rem;
#429	}
#430
#431	.network-item {
#432	display: flex;
#433	align-items: center;
#434	gap: 0.4rem;
#435	}
#436
#437	.net-dot {
#438	width: 6px;
#439	height: 6px;
#440	border-radius: 50%;
#441	}
#442
#443	.net-dot.connected {
#444	background: var(--success);
#445	}
#446
#447	.net-dot.degraded {
#448	background: var(--warning);
#449	}
#450
#451	.net-dot.disconnected {
#452	background: var(--error);
#453	}
#454
#455	.net-label {
#456	font-weight: 500;
#457	color: var(--text-secondary);
#458	}
#459
#460	.net-label.dim {
#461	color: var(--text-muted);
#462	font-weight: 400;
#463	}
#464
#465	.net-value {
#466	color: var(--text-primary);
#467	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#468	font-size: 0.7rem;
#469	}
#470
#471	/* Capabilities Bar */
#472	.capabilities-bar {
#473	padding: 0.5rem 1.5rem;
#474	background: var(--bg-primary);
#475	border-bottom: 1px solid var(--border-color);
#476	display: flex;
#477	gap: 0.5rem;
#478	overflow-x: auto;
#479	scrollbar-width: none;
#480	}
#481
#482	.capabilities-bar::-webkit-scrollbar {
#483	display: none;
#484	}
#485
#486	.cap-tag {
#487	padding: 0.3rem 0.65rem;
#488	background: var(--bg-tertiary);
#489	border: 1px solid var(--border-color);
#490	border-radius: 999px;
#491	font-size: 0.72rem;
#492	color: var(--text-secondary);
#493	white-space: nowrap;
#494	cursor: pointer;
#495	transition: all 0.15s;
#496	}
#497
#498	.cap-tag:hover {
#499	border-color: var(--accent);
#500	color: var(--accent);
#501	background: var(--accent-glow);
#502	}
#503
#504	/* Chat Area */
#505	.chat-area {
#506	flex: 1;
#507	overflow-y: auto;
#508	padding: 1.5rem;
#509	display: flex;
#510	flex-direction: column;
#511	gap: 1rem;
#512	scrollbar-width: thin;
#513	scrollbar-color: var(--bg-hover) transparent;
#514	}
#515
#516	.chat-area::-webkit-scrollbar {
#517	width: 6px;
#518	}
#519
#520	.chat-area::-webkit-scrollbar-track {
#521	background: transparent;
#522	}
#523
#524	.chat-area::-webkit-scrollbar-thumb {
#525	background: var(--bg-hover);
#526	border-radius: 3px;
#527	}
#528
#529	/* Welcome Screen */
#530	.welcome {
#531	flex: 1;
#532	display: flex;
#533	flex-direction: column;
#534	align-items: center;
#535	justify-content: center;
#536	text-align: center;
#537	gap: 1.5rem;
#538	max-width: 600px;
#539	margin: 0 auto;
#540	}
#541
#542	.welcome-logo {
#543	width: 72px;
#544	height: 72px;
#545	background: linear-gradient(135deg, var(--accent), #a855f7);
#546	border-radius: 18px;
#547	display: flex;
#548	align-items: center;
#549	justify-content: center;
#550	font-size: 2rem;
#551	font-weight: 700;
#552	color: white;
#553	box-shadow: 0 0 40px var(--accent-glow);
#554	}
#555
#556	.welcome h2 {
#557	font-size: 1.75rem;
#558	font-weight: 600;
#559	letter-spacing: -0.02em;
#560	}
#561
#562	.welcome p {
#563	color: var(--text-secondary);
#564	font-size: 0.95rem;
#565	max-width: 450px;
#566	line-height: 1.6;
#567	}
#568
#569	.suggestions {
#570	display: grid;
#571	grid-template-columns: 1fr 1fr;
#572	gap: 0.75rem;
#573	width: 100%;
#574	max-width: 500px;
#575	margin-top: 0.5rem;
#576	}
#577
#578	.suggestion {
#579	padding: 0.75rem 1rem;
#580	background: var(--bg-secondary);
#581	border: 1px solid var(--border-color);
#582	border-radius: var(--radius);
#583	font-size: 0.82rem;
#584	color: var(--text-secondary);
#585	cursor: pointer;
#586	text-align: left;
#587	transition: all 0.15s;
#588	line-height: 1.4;
#589	font-family: inherit;
#590	}
#591
#592	.suggestion:hover {
#593	border-color: var(--accent);
#594	color: var(--text-primary);
#595	background: var(--accent-glow);
#596	}
#597
#598	.suggestion strong {
#599	display: block;
#600	color: var(--text-primary);
#601	font-weight: 500;
#602	margin-bottom: 0.15rem;
#603	}
#604
#605	/* Messages */
#606	.message {
#607	display: flex;
#608	gap: 0.75rem;
#609	max-width: 800px;
#610	width: 100%;
#611	margin: 0 auto;
#612	}
#613
#614	.message-avatar {
#615	width: 32px;
#616	height: 32px;
#617	border-radius: 8px;
#618	display: flex;
#619	align-items: center;
#620	justify-content: center;
#621	font-size: 0.8rem;
#622	font-weight: 600;
#623	flex-shrink: 0;
#624	margin-top: 2px;
#625	}
#626
#627	.message-avatar.user {
#628	background: var(--bg-tertiary);
#629	border: 1px solid var(--border-color);
#630	color: var(--text-secondary);
#631	}
#632
#633	.message-avatar.agent {
#634	background: linear-gradient(135deg, var(--accent), #a855f7);
#635	color: white;
#636	}
#637
#638	.message-body {
#639	flex: 1;
#640	min-width: 0;
#641	}
#642
#643	.message-header {
#644	font-size: 0.8rem;
#645	font-weight: 600;
#646	margin-bottom: 0.35rem;
#647	display: flex;
#648	align-items: center;
#649	gap: 0.5rem;
#650	}
#651
#652	.message-header .timestamp {
#653	font-weight: 400;
#654	color: var(--text-muted);
#655	font-size: 0.72rem;
#656	}
#657
#658	.message-content {
#659	font-size: 0.9rem;
#660	line-height: 1.65;
#661	color: var(--text-secondary);
#662	}
#663
#664	.message-content p {
#665	margin-bottom: 0.5rem;
#666	}
#667
#668	.message-content p:last-child {
#669	margin-bottom: 0;
#670	}
#671
#672	.message-content code {
#673	background: var(--bg-tertiary);
#674	padding: 0.15rem 0.4rem;
#675	border-radius: 4px;
#676	font-size: 0.82rem;
#677	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#678	}
#679
#680	.message-content pre {
#681	background: var(--bg-tertiary);
#682	border: 1px solid var(--border-color);
#683	border-radius: var(--radius);
#684	padding: 0.75rem 1rem;
#685	overflow-x: auto;
#686	margin: 0.5rem 0;
#687	font-size: 0.82rem;
#688	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#689	line-height: 1.5;
#690	}
#691
#692	.message-content ul, .message-content ol {
#693	padding-left: 1.25rem;
#694	margin: 0.5rem 0;
#695	}
#696
#697	.message-content li {
#698	margin-bottom: 0.25rem;
#699	}
#700
#701	/* Thinking Indicator */
#702	.thinking-indicator {
#703	display: flex;
#704	gap: 0.75rem;
#705	max-width: 800px;
#706	width: 100%;
#707	margin: 0 auto;
#708	}
#709
#710	.thinking-dots {
#711	display: flex;
#712	gap: 4px;
#713	align-items: center;
#714	padding: 0.5rem 0;
#715	}
#716
#717	.thinking-dots span {
#718	width: 6px;
#719	height: 6px;
#720	background: var(--accent);
#721	border-radius: 50%;
#722	animation: bounce 1.4s infinite;
#723	}
#724
#725	.thinking-dots span:nth-child(2) {
#726	animation-delay: 0.2s;
#727	}
#728
#729	.thinking-dots span:nth-child(3) {
#730	animation-delay: 0.4s;
#731	}
#732
#733	@keyframes bounce {
#734	0%, 80%, 100% { transform: translateY(0); }
#735	40% { transform: translateY(-6px); }
#736	}
#737
#738	.thinking-label {
#739	font-size: 0.8rem;
#740	color: var(--text-muted);
#741	padding: 0.5rem 0;
#742	font-style: italic;
#743	}
#744
#745	/* Input Area */
#746	.input-area {
#747	padding: 1rem 1.5rem 1.25rem;
#748	background: var(--bg-secondary);
#749	border-top: 1px solid var(--border-color);
#750	}
#751
#752	.input-wrapper {
#753	max-width: 800px;
#754	margin: 0 auto;
#755	display: flex;
#756	gap: 0.75rem;
#757	align-items: flex-end;
#758	}
#759
#760	.input-container {
#761	flex: 1;
#762	background: var(--bg-primary);
#763	border: 1px solid var(--border-color);
#764	border-radius: var(--radius-lg);
#765	display: flex;
#766	align-items: flex-end;
#767	padding: 0.5rem;
#768	transition: border-color 0.15s;
#769	}
#770
#771	.input-container:focus-within {
#772	border-color: var(--accent);
#773	box-shadow: 0 0 0 2px var(--accent-glow);
#774	}
#775
#776	.input-container textarea {
#777	flex: 1;
#778	background: transparent;
#779	border: none;
#780	color: var(--text-primary);
#781	font-size: 0.9rem;
#782	font-family: inherit;
#783	resize: none;
#784	padding: 0.35rem 0.5rem;
#785	line-height: 1.5;
#786	max-height: 150px;
#787	outline: none;
#788	}
#789
#790	.input-container textarea::placeholder {
#791	color: var(--text-muted);
#792	}
#793
#794	.send-btn {
#795	width: 36px;
#796	height: 36px;
#797	background: var(--accent);
#798	border: none;
#799	border-radius: var(--radius);
#800	color: white;
#801	cursor: pointer;
#802	display: flex;
#803	align-items: center;
#804	justify-content: center;
#805	transition: all 0.15s;
#806	flex-shrink: 0;
#807	}
#808
#809	.send-btn:hover:not(:disabled) {
#810	background: var(--accent-hover);
#811	transform: translateY(-1px);
#812	}
#813
#814	.send-btn:disabled {
#815	opacity: 0.4;
#816	cursor: not-allowed;
#817	}
#818
#819	.input-footer {
#820	display: flex;
#821	justify-content: space-between;
#822	align-items: center;
#823	margin-top: 0.5rem;
#824	font-size: 0.72rem;
#825	color: var(--text-muted);
#826	max-width: 800px;
#827	margin-left: auto;
#828	margin-right: auto;
#829	}
#830
#831	.input-hint {
#832	display: flex;
#833	align-items: center;
#834	gap: 0.35rem;
#835	}
#836
#837	.kbd {
#838	padding: 0.1rem 0.35rem;
#839	background: var(--bg-tertiary);
#840	border: 1px solid var(--border-color);
#841	border-radius: 3px;
#842	font-size: 0.68rem;
#843	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#844	}
#845
#846	/* Task Panel */
#847	.task-panel {
#848	padding: 0.5rem 1.5rem;
#849	background: var(--bg-primary);
#850	border-bottom: 1px solid var(--border-color);
#851	}
#852
#853	.task-item {
#854	max-width: 800px;
#855	margin: 0 auto;
#856	display: flex;
#857	align-items: center;
#858	gap: 0.75rem;
#859	padding: 0.5rem 0;
#860	font-size: 0.82rem;
#861	}
#862
#863	.task-icon {
#864	width: 24px;
#865	height: 24px;
#866	border-radius: 6px;
#867	display: flex;
#868	align-items: center;
#869	justify-content: center;
#870	font-size: 0.7rem;
#871	flex-shrink: 0;
#872	}
#873
#874	.task-icon.running {
#875	background: var(--accent-glow);
#876	color: var(--accent);
#877	animation: pulse 1.5s infinite;
#878	}
#879
#880	.task-icon.done {
#881	background: rgba(34, 197, 94, 0.15);
#882	color: var(--success);
#883	}
#884
#885	.task-text {
#886	flex: 1;
#887	color: var(--text-secondary);
#888	}
#889
#890	.task-time {
#891	color: var(--text-muted);
#892	font-size: 0.72rem;
#893	}
#894
#895	/* ── Agents View ── */
#896	.agents-view {
#897	flex: 1;
#898	overflow-y: auto;
#899	padding: 1.5rem;
#900	}
#901
#902	.agents-grid {
#903	display: grid;
#904	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
#905	gap: 1rem;
#906	max-width: 1100px;
#907	margin: 0 auto;
#908	}
#909
#910	.agent-card {
#911	background: var(--bg-secondary);
#912	border: 1px solid var(--border-color);
#913	border-radius: var(--radius-lg);
#914	padding: 1.25rem;
#915	transition: border-color 0.15s;
#916	}
#917
#918	.agent-card:hover {
#919	border-color: var(--border-active);
#920	}
#921
#922	.agent-card-header {
#923	display: flex;
#924	align-items: center;
#925	gap: 0.75rem;
#926	margin-bottom: 1rem;
#927	}
#928
#929	.agent-card-icon {
#930	width: 40px;
#931	height: 40px;
#932	background: linear-gradient(135deg, var(--accent), #a855f7);
#933	border-radius: 10px;
#934	display: flex;
#935	align-items: center;
#936	justify-content: center;
#937	font-weight: 700;
#938	font-size: 1rem;
#939	color: white;
#940	flex-shrink: 0;
#941	}
#942
#943	.agent-card-info {
#944	flex: 1;
#945	min-width: 0;
#946	}
#947
#948	.agent-card-info h3 {
#949	font-size: 0.9rem;
#950	font-weight: 600;
#951	margin-bottom: 0.1rem;
#952	overflow: hidden;
#953	text-overflow: ellipsis;
#954	white-space: nowrap;
#955	}
#956
#957	.agent-card-chain {
#958	font-size: 0.72rem;
#959	color: var(--text-muted);
#960	}
#961
#962	.agent-card-status {
#963	font-size: 0.6rem;
#964	padding: 0.15rem 0.5rem;
#965	border-radius: 999px;
#966	text-transform: uppercase;
#967	letter-spacing: 0.05em;
#968	font-weight: 600;
#969	flex-shrink: 0;
#970	}
#971
#972	.agent-card-status.active {
#973	background: rgba(34, 197, 94, 0.15);
#974	color: var(--success);
#975	}
#976
#977	.agent-card-status.deploying {
#978	background: rgba(234, 179, 8, 0.15);
#979	color: var(--warning);
#980	}
#981
#982	.agent-card-status.paused {
#983	background: rgba(239, 68, 68, 0.15);
#984	color: var(--error);
#985	}
#986
#987	.agent-card-stats {
#988	display: grid;
#989	grid-template-columns: 1fr 1fr;
#990	gap: 0.75rem;
#991	margin-bottom: 1rem;
#992	}
#993
#994	.agent-stat {
#995	display: flex;
#996	flex-direction: column;
#997	gap: 0.15rem;
#998	}
#999
#1000	.agent-stat-label {
#1001	font-size: 0.68rem;
#1002	color: var(--text-muted);
#1003	text-transform: uppercase;
#1004	letter-spacing: 0.05em;
#1005	}
#1006
#1007	.agent-stat-value {
#1008	font-size: 0.85rem;
#1009	font-weight: 500;
#1010	color: var(--text-primary);
#1011	}
#1012
#1013	.agent-stat-value.mono {
#1014	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#1015	font-size: 0.78rem;
#1016	color: var(--text-secondary);
#1017	}
#1018
#1019	.agent-card-actions {
#1020	display: flex;
#1021	gap: 0.5rem;
#1022	}
#1023
#1024	.agent-action-btn {
#1025	flex: 1;
#1026	padding: 0.5rem;
#1027	background: var(--accent);
#1028	color: white;
#1029	border: none;
#1030	border-radius: var(--radius);
#1031	font-size: 0.78rem;
#1032	font-weight: 500;
#1033	cursor: pointer;
#1034	transition: all 0.15s;
#1035	font-family: inherit;
#1036	}
#1037
#1038	.agent-action-btn:hover {
#1039	background: var(--accent-hover);
#1040	}
#1041
#1042	.agent-action-btn.secondary {
#1043	background: transparent;
#1044	color: var(--text-secondary);
#1045	border: 1px solid var(--border-color);
#1046	}
#1047
#1048	.agent-action-btn.secondary:hover {
#1049	background: var(--bg-hover);
#1050	color: var(--text-primary);
#1051	}
#1052
#1053	.add-card {
#1054	border: 2px dashed var(--border-color);
#1055	background: transparent;
#1056	display: flex;
#1057	align-items: center;
#1058	justify-content: center;
#1059	min-height: 220px;
#1060	cursor: pointer;
#1061	transition: all 0.15s;
#1062	}
#1063
#1064	.add-card:hover {
#1065	border-color: var(--accent);
#1066	background: var(--accent-glow);
#1067	}
#1068
#1069	.add-card-content {
#1070	display: flex;
#1071	flex-direction: column;
#1072	align-items: center;
#1073	gap: 0.75rem;
#1074	color: var(--text-muted);
#1075	font-size: 0.85rem;
#1076	}
#1077
#1078	.add-card:hover .add-card-content {
#1079	color: var(--accent);
#1080	}
#1081
#1082	/* ── Network View ── */
#1083	.network-view {
#1084	flex: 1;
#1085	overflow-y: auto;
#1086	padding: 1.5rem;
#1087	display: flex;
#1088	flex-direction: column;
#1089	gap: 1.5rem;
#1090	max-width: 1100px;
#1091	margin: 0 auto;
#1092	width: 100%;
#1093	}
#1094
#1095	.network-overview {
#1096	display: grid;
#1097	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
#1098	gap: 1rem;
#1099	}
#1100
#1101	.network-stat-card {
#1102	background: var(--bg-secondary);
#1103	border: 1px solid var(--border-color);
#1104	border-radius: var(--radius-lg);
#1105	padding: 1.25rem;
#1106	display: flex;
#1107	flex-direction: column;
#1108	gap: 0.35rem;
#1109	}
#1110
#1111	.net-stat-label {
#1112	font-size: 0.72rem;
#1113	color: var(--text-muted);
#1114	text-transform: uppercase;
#1115	letter-spacing: 0.05em;
#1116	}
#1117
#1118	.net-stat-value {
#1119	font-size: 1.5rem;
#1120	font-weight: 700;
#1121	color: var(--text-primary);
#1122	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#1123	}
#1124
#1125	.net-stat-change {
#1126	font-size: 0.72rem;
#1127	font-weight: 500;
#1128	}
#1129
#1130	.net-stat-change.positive {
#1131	color: var(--success);
#1132	}
#1133
#1134	.net-stat-change.negative {
#1135	color: var(--error);
#1136	}
#1137
#1138	.network-chains {
#1139	background: var(--bg-secondary);
#1140	border: 1px solid var(--border-color);
#1141	border-radius: var(--radius-lg);
#1142	padding: 1.25rem;
#1143	}
#1144
#1145	.network-chains h3 {
#1146	font-size: 0.9rem;
#1147	font-weight: 600;
#1148	margin-bottom: 1rem;
#1149	}
#1150
#1151	.chain-table {
#1152	display: flex;
#1153	flex-direction: column;
#1154	gap: 0;
#1155	}
#1156
#1157	.chain-table-header,
#1158	.chain-table-row {
#1159	display: grid;
#1160	grid-template-columns: 1.2fr 0.8fr 0.6fr 0.8fr 0.8fr;
#1161	gap: 0.75rem;
#1162	padding: 0.6rem 0;
#1163	font-size: 0.8rem;
#1164	align-items: center;
#1165	}
#1166
#1167	.chain-table-header {
#1168	color: var(--text-muted);
#1169	font-size: 0.7rem;
#1170	text-transform: uppercase;
#1171	letter-spacing: 0.05em;
#1172	border-bottom: 1px solid var(--border-color);
#1173	}
#1174
#1175	.chain-table-row {
#1176	color: var(--text-secondary);
#1177	border-bottom: 1px solid var(--border-color);
#1178	}
#1179
#1180	.chain-table-row:last-child {
#1181	border-bottom: none;
#1182	}
#1183
#1184	.chain-name {
#1185	font-weight: 500;
#1186	color: var(--text-primary);
#1187	}
#1188
#1189	.chain-status {
#1190	display: flex;
#1191	align-items: center;
#1192	gap: 0.4rem;
#1193	font-size: 0.78rem;
#1194	}
#1195
#1196	.network-actions {
#1197	display: flex;
#1198	gap: 1rem;
#1199	flex-wrap: wrap;
#1200	}
#1201
#1202	.net-action-btn {
#1203	padding: 0.75rem 1.25rem;
#1204	background: var(--bg-secondary);
#1205	border: 1px solid var(--border-color);
#1206	border-radius: var(--radius-lg);
#1207	color: var(--text-secondary);
#1208	font-size: 0.85rem;
#1209	font-weight: 500;
#1210	cursor: pointer;
#1211	display: flex;
#1212	align-items: center;
#1213	gap: 0.5rem;
#1214	transition: all 0.15s;
#1215	font-family: inherit;
#1216	}
#1217
#1218	.net-action-btn:hover {
#1219	border-color: var(--accent);
#1220	color: var(--accent);
#1221	background: var(--accent-glow);
#1222	}
#1223
#1224	/* Responsive */
#1225	@media (max-width: 768px) {
#1226	.app {
#1227	grid-template-columns: 1fr;
#1228	}
#1229
#1230	.sidebar {
#1231	display: none;
#1232	}
#1233
#1234	.suggestions {
#1235	grid-template-columns: 1fr;
#1236	}
#1237
#1238	.network-overview {
#1239	grid-template-columns: 1fr 1fr;
#1240	}
#1241
#1242	.agents-grid {
#1243	grid-template-columns: 1fr;
#1244	}
#1245
#1246	.chain-table-header,
#1247	.chain-table-row {
#1248	grid-template-columns: 1fr 1fr;
#1249	font-size: 0.75rem;
#1250	}
#1251
#1252	.chain-table-header span:nth-child(n+3),
#1253	.chain-table-row span:nth-child(n+3) {
#1254	display: none;
#1255	}
#1256	}
#1257
#1258	/* Scrollbar for sidebar */
#1259	.conversations-list::-webkit-scrollbar {
#1260	width: 4px;
#1261	}
#1262
#1263	.conversations-list::-webkit-scrollbar-track {
#1264	background: transparent;
#1265	}
#1266
#1267	.conversations-list::-webkit-scrollbar-thumb {
#1268	background: var(--bg-hover);
#1269	border-radius: 2px;
#1270	}
#1271

z6MkhS7a/a-autonomous-ai-agent-called-leone-ai