update docs

web-server/public/css/styles.css

@@ -1724,12 +1724,155 @@ tbody tr:hover td.action-col {
   min-width: 980px;
 }
 
+.documents-table {
+  min-width: 980px;
+}
+
+.document-title-cell {
+  max-width: 360px;
+  min-width: 240px;
+}
+
+.document-title-cell .table-subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-file-name {
+  color: var(--text-primary);
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-detail-grid {
+  display: grid;
+  flex: 1;
+  gap: 16px;
+  grid-template-columns: 320px minmax(0, 1fr);
+  min-height: 0;
+}
+
+.document-meta-panel,
+.document-reader-panel {
+  min-width: 0;
+}
+
+.document-reader {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 20px;
+  min-height: 0;
+  overflow: auto;
+  padding: 20px;
+}
+
+.document-copy {
+  color: var(--text-primary);
+  font-family: "Montserrat Variable", Montserrat, "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 1.75;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.document-preview-block {
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 16px;
+}
+
+.document-section-heading {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+}
+
+.document-section-heading .material-symbols-outlined {
+  color: var(--brand-primary);
+  font-size: 18px;
+}
+
+.document-file-preview {
+  background: var(--neutral-50);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  min-height: 540px;
+  width: 100%;
+}
+
+.document-image-preview {
+  align-self: center;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  height: auto;
+  max-height: 70vh;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.document-attachment-state {
+  align-items: center;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: 14px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 16px;
+}
+
+.document-attachment-state > .material-symbols-outlined {
+  color: var(--brand-primary);
+  font-size: 34px;
+}
+
+.document-attachment-state strong,
+.document-attachment-state p {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.document-attachment-state p {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.document-remove-option {
+  align-items: flex-start;
+  background: var(--semantic-warning-bg);
+  border: 1px solid #f3d28c;
+  border-radius: var(--radius-md);
+  color: var(--semantic-warning);
+  display: flex;
+  font-size: 12px;
+  gap: 8px;
+  padding: 10px 12px;
+}
+
+.document-remove-option input {
+  flex: 0 0 auto;
+  margin-top: 3px;
+}
+
 @media (max-width: 1100px) {
   .dashboard-grid,
   .detail-grid,
   .builder-layout,
   .agent-layout,
-  .users-layout {
+  .users-layout,
+  .document-detail-grid {
     grid-template-columns: 1fr;
   }
 
@@ -1740,9 +1883,14 @@ tbody tr:hover td.action-col {
   .detail-grid,
   .builder-layout,
   .agent-layout,
-  .users-layout {
+  .users-layout,
+  .document-detail-grid {
     overflow: auto;
   }
+
+  .document-reader-panel {
+    min-height: 620px;
+  }
 }
 
 @media (max-width: 900px) {
@@ -1833,6 +1981,16 @@ tbody tr:hover td.action-col {
     gap: 8px;
   }
 
+  .document-attachment-state {
+    align-items: flex-start;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .document-attachment-state .btn {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
   .modal-backdrop {
     align-items: flex-end;
   }