feat: debug logger and viewer

Author: Soare-Robert-Daniel

css/settings.css

@@ -2559,6 +2559,7 @@ li.draggable-item .components-panel__body-toggle.components-button{
 	border-bottom: 0;
     padding: 24px 0 0;
 }
+
 @-webkit-keyframes spin { 
     100% { -webkit-transform: rotate(360deg); } 
 }
@@ -2573,4 +2574,137 @@ li.draggable-item .components-panel__body-toggle.components-button{
 	.support-box-list > ul{
 		grid-template-columns: repeat(2, 1fr);
 	}
+}
+
+/* Feedzy Logs */
+.fz-logs {
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.fz-logs h3 {
+  margin-bottom: 10px;
+  font-size: 1.25em;
+  color: #333;
+}
+
+/* Logs view container */
+.fz-logs-view {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* Individual log container */
+.fz-log-container {
+  display: flex;
+  gap: 10px;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-left-width: 5px;
+  padding: 8px 10px;
+  transition: background-color 0.1s ease;
+  font-size: 0.875em;
+}
+
+.fz-log-container:hover {
+  background-color: #f5f5f5;
+}
+
+/* Left section */
+.fz-log-container__left {
+  flex: 0 0 50%;
+  min-width: 0;
+}
+
+/* Header with level and date */
+.fx-log-container__header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 4px;
+  font-size: 1.1em;
+}
+
+/* Log level styling */
+.fx-log-container__header > *:first-child {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  min-width: 50px;
+  text-align: center;
+}
+
+/* Date styling */
+.fz-log-container__date {
+  color: #757575;
+  font-size: 0.85em;
+}
+
+/* Message styling */
+.fz-log-container__message {
+  color: #212529;
+  line-height: 1.3;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-size: 1em;
+  margin-top: 10px;
+}
+
+/* Right section - Context */
+.fz-log-container__right {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Context styling - compact */
+.fz-log-container__context {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 5px;
+  padding: 6px 8px;
+  font-family: 'Courier New', Consolas, Monaco, monospace;
+  font-size: 0.9em;
+  line-height: 1.3;
+  color: #495057;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+.fz-log-container--error {
+	border-left-color: red;
+}
+
+.fz-log-container--info {
+	border-left-color: blue;
+}
+
+.fz-log-container--debug {
+	border-left-color: green;
+}
+
+.fz-log-container--warning {
+	border-left-color: yellow;
+}
+
+.fz-log-container--critical {
+	border-left-color: violet;
+}
+
+.fz-logs-header {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: 1rem;
+}
+
+.fz-logs-header-actions {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
 }