Changeset 0.12.0 (#63)

src/css/styles.css

@@ -901,6 +901,133 @@ a:hover { text-decoration: underline; }
 .stop-btn { display: none; color: var(--warning); }
 .stop-btn.visible { display: flex; }
 
+/* ── Attachments ─────────────────────────── */
+
+.attach-btn { color: var(--text-3); padding: 6px 4px 12px 10px; }
+.attach-btn:hover { color: var(--text); }
+
+.attachment-strip {
+    max-width: 768px; margin: 0 auto; padding: 6px 8px 2px;
+    display: flex; gap: 6px; flex-wrap: wrap;
+}
+
+.att-chip {
+    display: flex; align-items: center; gap: 6px;
+    background: var(--bg-raised); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 4px 6px;
+    font-size: 12px; max-width: 220px; position: relative;
+}
+.att-chip.att-ready { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
+.att-chip.att-error { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
+.att-chip.att-pending { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
+
+.att-thumb {
+    width: 32px; height: 32px; object-fit: cover;
+    border-radius: 3px; flex-shrink: 0;
+}
+.att-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
+
+.att-info { display: flex; flex-direction: column; min-width: 0; }
+.att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
+.att-meta { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.att-remove {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    padding: 2px 4px; font-size: 13px; line-height: 1; border-radius: 3px;
+    flex-shrink: 0; margin-left: auto;
+}
+.att-remove:hover { background: var(--bg-hover); color: var(--text); }
+
+/* Drag-and-drop overlay on chat area */
+.messages.drag-over {
+    outline: 2px dashed var(--accent);
+    outline-offset: -4px;
+    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
+}
+
+/* ── Message Attachments ────────────────────── */
+
+.msg-attachments {
+    display: flex; gap: 8px; flex-wrap: wrap;
+    margin-top: 8px;
+}
+
+.msg-att-image {
+    cursor: pointer; position: relative; border-radius: var(--radius);
+    overflow: hidden; border: 1px solid var(--border);
+    transition: border-color var(--transition);
+}
+.msg-att-image:hover { border-color: var(--accent); }
+.msg-att-image img {
+    display: block; max-height: 280px; border-radius: var(--radius);
+    background: var(--bg-raised);
+}
+.msg-att-image img.att-load-error {
+    min-width: 120px; min-height: 60px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; color: var(--text-3);
+}
+
+.att-vision-hint {
+    position: absolute; top: 4px; right: 4px;
+    background: color-mix(in srgb, var(--bg) 85%, transparent);
+    border-radius: 4px; padding: 2px 5px; font-size: 14px;
+    cursor: help;
+}
+
+.msg-att-doc {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; border: 1px solid var(--border);
+    border-radius: var(--radius); background: var(--bg-raised);
+    text-decoration: none; color: var(--text);
+    max-width: 280px; transition: border-color var(--transition);
+}
+.msg-att-doc:hover { border-color: var(--accent); }
+.att-doc-icon { font-size: 20px; flex-shrink: 0; }
+.att-doc-info { display: flex; flex-direction: column; min-width: 0; }
+.att-doc-name {
+    font-size: 13px; font-weight: 500;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.att-doc-size { font-size: 11px; color: var(--text-3); }
+.att-doc-dl { color: var(--text-3); font-size: 14px; margin-left: auto; }
+
+/* ── Image Lightbox ─────────────────────────── */
+
+.lightbox-overlay {
+    display: none; position: fixed; inset: 0; z-index: 10000;
+    background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
+}
+.lightbox-overlay.active { display: flex; }
+.lightbox-overlay img {
+    max-width: 92vw; max-height: 90vh; object-fit: contain;
+    border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+}
+.lightbox-close {
+    position: absolute; top: 16px; right: 20px;
+    background: rgba(255,255,255,0.15); border: none; color: #fff;
+    font-size: 22px; width: 40px; height: 40px; border-radius: 50%;
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s;
+}
+.lightbox-close:hover { background: rgba(255,255,255,0.3); }
+
+/* ── Admin Storage Panel ────────────────────── */
+
+.admin-storage-card {
+    background: var(--bg-raised); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
+}
+.admin-storage-card h4 { margin: 0 0 10px 0; font-size: 14px; }
+.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 10px 0; }
+.admin-storage-grid {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+}
+.admin-storage-item { display: flex; flex-direction: column; gap: 2px; }
+.admin-storage-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
+.admin-storage-value { font-size: 14px; font-weight: 500; }
+
 /* ── Buttons ─────────────────────────────── */
 
 button { font-family: var(--font); cursor: pointer; }
@@ -1354,6 +1481,9 @@ button { font-family: var(--font); cursor: pointer; }
 .team-admin-back:hover { opacity: 1; }
 .team-tab-content { padding: 0; }
 .badge-private { background: rgba(139,92,246,0.85); color: #fff; font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-success { background: rgba(34,197,94,0.2); color: #4ade80; font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-warning { background: rgba(234,179,8,0.2); color: #fbbf24; font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-danger { background: rgba(239,68,68,0.2); color: #f87171; font-size: 10px; padding: 1px 8px; border-radius: 4px; }
 .admin-user-row.user-inactive { opacity: 0.7; }
 .loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; }
 .error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }