enable image attachments to the chatHEADmain

1 files changed, 81 insertions, 0 deletions

diff --git a/styles.css b/styles.css
index 871380d..ed86562 100644
--- a/styles.css
+++ b/styles.css
@@ -79,6 +79,8 @@
 .ai-pulse-input-row {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: flex-end;
 	gap: 6px;
 	padding: 8px;
 }
@@ -701,3 +703,82 @@
 .ai-pulse-batch-file-header:first-child {
 	margin-top: 0 !important;
 }
+
+
+/* ===== Image Attachment UI ===== */
+
+.ai-pulse-attach-btn {
+	flex-shrink: 0;
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 4px;
+	border-radius: 4px;
+	color: var(--text-muted);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ai-pulse-attach-btn:hover {
+	color: var(--text-normal);
+	background: var(--background-modifier-hover);
+}
+
+.ai-pulse-attach-btn:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.ai-pulse-attachment-strip {
+	display: flex;
+	gap: 6px;
+	padding: 6px 8px;
+	overflow-x: auto;
+	flex-wrap: nowrap;
+	width: 100%;
+}
+
+.ai-pulse-attachment-thumb {
+	position: relative;
+	width: 48px;
+	height: 48px;
+	border-radius: 4px;
+	overflow: visible;
+	flex-shrink: 0;
+	border: 1px solid var(--background-modifier-border);
+}
+
+.ai-pulse-attachment-thumb img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: 4px;
+}
+
+.ai-pulse-attachment-remove {
+	position: absolute;
+	top: -6px;
+	right: -6px;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: var(--background-secondary);
+	border: 1px solid var(--background-modifier-border);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	color: var(--text-muted);
+}
+
+.ai-pulse-attachment-remove:hover {
+	background: var(--background-modifier-error);
+	color: var(--text-on-accent);
+}
+
+.ai-pulse-attachment-remove svg {
+	width: 12px;
+	height: 12px;
+}