pushfeedback 0.1.69 → 0.1.70

package/dist/collection/components/feedback-modal/feedback-modal.css

@@ -1,1003 +0,0 @@
-.text-center {
-  flex-grow: 1;
-  text-align: center;
-}
-
-.feedback-modal-wrapper * {
-  font-family: var(--feedback-font-family);
-}
-
-.feedback-modal-wrapper--custom-font * {
-  font-family: inherit;
-
-}
-
-.feedback-modal-wrapper {
-  position: absolute;
-  z-index: var(--feedback-modal-modal-wrapper-z-index);
-}
-
-.feedback-overlay {
-  background-color: var(--feedback-modal-screenshot-bg-color);
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: var(--feedback-modal-screnshot-z-index);
-  transition: opacity 0.2s ease-out;
-}
-
-.feedback-overlay--visible {
-  opacity: 1;
-}
-
-.feedback-modal {
-  display: inline-block;
-  position: relative;
-}
-
-.feedback-modal-content {
-  background-color: var(--feedback-modal-content-bg-color);
-  border-color: 1px solid var(--feedback-modal-header-text-color);
-  border-radius: var(--feedback-modal-content-border-radius);
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
-  box-sizing: border-box;
-  color: var(--feedback-modal-content-text-color);
-  display: flex;
-  flex-direction: column;
-  left: 50%;
-  max-width: 90%;
-  padding: 20px;
-  position: fixed;
-  top: 50%;
-  transform: translate(-50%, -50%) scale(0.95);
-  opacity: 0;
-  width: 100%;
-  z-index: var(--feedback-modal-content-z-index);
-  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-}
-
-.feedback-modal-content--open {
-  transform: translate(-50%, -50%) scale(1);
-  opacity: 1;
-}
-
-.feedback-modal-header {
-  align-items: center;
-  color: var(--feedback-modal-header-text-color);
-  display: flex;
-  font-size: var(--feedback-header-font-size);
-  font-weight: var(--feedback-modal-header-font-weight);
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.feedback-modal-rating-buttons {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.feedback-modal-rating-button {
-  padding: 0;
-  background-color: transparent;
-  border: transparent;
-  margin-right: 5px;
-  cursor: pointer;
-}
-
-.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button {
-  border: 1px solid var(--feedback-modal-button-border-color);
-  border-radius: var(--feedback-modal-button-border-radius);
-  color: var(--feedback-modal-button-text-color);
-  font-size: var(--feedback-modal-button-font-size);
-
-  font-weight: 500;
-  margin-right: 10px;
-  justify-content: center;
-  padding: 5px 10px;
-}
-
-.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,
-.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected {
-  background-color: var(--feedback-modal-button-bg-color-active);
-  border: 1px solid var(--feedback-modal-button-border-color-active);
-  color: var(--feedback-modal-button-text-color-active);
-}
-
-.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,
-.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg {
-  stroke: var(--feedback-modal-rating-button-selected-color);
-}
-
-.feedback-modal-rating-buttons svg {
-  stroke: var(--feedback-modal-rating-button-color);
-  cursor: pointer;
-}
-
-.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg {
-  fill: var(--feedback-modal-rating-button-stars-selected-color);
-  stroke: var(--feedback-modal-rating-button-stars-selected-color);
-}
-
-.feedback-modal-text textarea {
-  background-color: var(--feedback-modal-input-bg-color);
-  border: 1px solid var(--feedback-modal-input-border-color);
-  border-radius: var(--feedback-modal-input-border-radius);
-  box-sizing: border-box;
-  color: var(--feedback-modal-input-text-color);
-  font-size: var(--feedback-modal-input-font-size);
-  margin-bottom: 20px;
-  height: 100px;
-  min-height: 100px;
-  padding: 10px;
-  resize: vertical;
-  width: 100%;
-}
-
-
-.feedback-modal-email input {
-  background-color: var(--feedback-modal-input-bg-color);
-  border: 1px solid var(--feedback-modal-input-border-color);
-  border-radius: var(--feedback-modal-input-border-radius);
-  box-sizing: border-box;
-  color: var(--feedback-modal-input-text-color);
-  font-size: var(--feedback-modal-input-font-size);
-  margin-bottom: 20px;
-  height: 40px;
-  padding: 10px;
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.feedback-modal-privacy {
-  font-size: var(--feedback-modal-input-font-size);
-  margin-bottom: 20px;
-}
-
-
-.feedback-modal-text textarea:focus, .feedback-modal-email input:focus {
-  border: 1px solid var(--feedback-modal-input-border-color-focused);
-  outline: none;
-}
-
-.feedback-modal-buttons {
-  display: flex;
-  flex-direction: column;
-}
-
-.feedback-modal-buttons .feedback-modal-button {
-  margin-bottom: 20px;
-}
-
-.feedback-modal-button {
-  align-items: center;
-  background-color: transparent;
-  border: 1px solid var(--feedback-modal-button-border-color);
-  border-radius: var(--feedback-modal-button-border-radius);
-  color: var(--feedback-modal-button-text-color);
-  cursor: pointer;
-  display: flex;
-  font-size: var(--feedback-modal-button-font-size);
-  font-weight: 500;
-  justify-content: center;
-  min-height: 40px;
-  padding: 5px 10px;
-}
-
-.feedback-modal-button svg {
-  margin-right: 6px;
-}
-
-.feedback-modal-button path {
-  fill: var(--feedback-modal-button-icon-color);
-}
-
-.feedback-modal-button:hover path,
-.feedback-modal-button--active path  {
-  fill: var(--feedback-modal-button-icon-color-active);
-}
-
-.feedback-modal-button--submit {
-  background-color: var(--feedback-modal-button-submit-bg-color);
-  border: 1px solid var(--feedback-modal-button-border-color-active);
-  color: var(--feedback-modal-button-submit-text-color);
-}
-
-.feedback-modal-button:hover,
-.feedback-modal-button--active {
-  background-color: var(--feedback-modal-button-bg-color-active);
-  border: 1px solid var(--feedback-modal-button-border-color-active);
-  color: var(--feedback-modal-button-text-color-active);
-}
-
-.feedback-modal-button--submit:hover{
-  background-color: var(--feedback-modal-button-submit-bg-color-hover);
-  border: 1px solid var(--feedback-modal-button-submit-border-color-hover);
-  color: var(--feedback-modal-button-submit-text-color-hover);
-}
-
-
-.feedback-modal-input-heading{
-  display: block;
-  font-size: 14px;
-  font-weight: 300;
-  padding-bottom: 10px;
-}
-
-.feedback-modal-footer {
-  font-size: 12px;
-  text-align: center;
-}
-
-.feedback-modal-footer a {
-  color: var(--feedback-modal-footer-link);
-  font-weight: 500;
-  text-decoration: none;
-}
-
-.feedback-logo,
-.feedback-footer-text {
-  display: block;
-  text-align: center;
-  margin-top: 5px;
-}
-
-.feedback-footer-text {
-  margin-top: 10px;
-  line-height: 1.5;
-}
-
-.feedback-modal-close {
-  background-color: var(--feedback-modal-close-bg-color);
-  border: 0;
-  border-radius: 50%;
-  cursor: pointer;
-  height: 22px;
-  margin-left: auto;
-  padding: 0;
-  width: 22px;
-}
-
-.feedback-modal-close svg {
-  stroke: var(--feedback-modal-close-color);
-}
-
-
-.feedback-modal-screenshot {
-  background-color: var(--feedback-modal-screenshot-bg-color);
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: var(--feedback-modal-screnshot-z-index);
-}
-
-.feedback-modal-screenshot-header {
-  align-items: center;
-  background-color: var(--feedback-modal-screenshot-header-bg-color);
-  border-radius: var(--feedback-modal-content-border-radius);
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
-  box-sizing: border-box;
-  color: var(--feedback-modal-screenshot-header-text-color);
-  cursor: pointer;
-  display: flex;
-  left: 50%;
-  top: 20px;
-  transform: translateX(-50%);
-  padding: 10px;
-  position: fixed;
-  width: max-content; 
-  z-index: var(--feedback-modal-screenshot-header-z-index);
-}
-
-.feedback-modal-screenshot-close {
-  height: 24px;
-  padding-left: 10px;
-  width: 24px;
-}
-
-.feedback-modal-screenshot-close svg {
-  stroke: var(--feedback-modal-close-color);
-}
-
-.feedback-modal-message {
-  font-size: var(--feedback-modal-message-font-size);
-  margin-top: 0;
-}
-
-
-.feedback-modal-element-hover {
-  background-color: transparent;  
-  cursor: pointer;
-  border: 1px solid var(--feedback-modal-element-hover-border-color); 
-}
-
-
-.feedback-modal-element-selected {
-  background-color: transparent;  
-  border: 3px solid var(--feedback-modal-element-selected-border-color) !important;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3) !important;
-}
-
-.screenshot-preview {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  overflow: hidden;
-  border-radius: 4px;
-  margin-right: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.screenshot-preview:hover {
-  transform: scale(1.1);
-}
-
-.screenshot-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-
-
-.screenshot-loading {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 8px;
-}
-
-/* Canvas Editor Styles - Consistent with Widget Design */
-.canvas-editor-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--feedback-modal-screenshot-bg-color);
-  z-index: 10001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.canvas-editor-modal {
-  width: 95vw;
-  height: 98vh;
-  background: var(--feedback-canvas-editor-bg-color);
-  border-radius: var(--feedback-modal-content-border-radius);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
-}
-
-.canvas-editor-header {
-  background: var(--feedback-canvas-editor-header-bg-color);
-  border-bottom: 1px solid var(--feedback-canvas-editor-border-color);
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.canvas-editor-title h3 {
-  margin: 0;
-  font-size: var(--feedback-modal-header-font-size);
-  font-weight: var(--feedback-modal-header-font-weight);
-  color: var(--feedback-modal-header-text-color);
-  font-family: var(--feedback-modal-header-font-family);
-}
-
-.canvas-editor-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-
-.toolbar-section {
-  display: flex;
-  align-items: center;
-}
-
-.toolbar-section:last-child {
-  margin-left: auto;
-  gap: 10px;
-}
-
-.tool-group {
-  display: flex;
-  align-items: center;
-  background: var(--feedback-canvas-editor-tool-bg-color);
-  border: 1px solid var(--feedback-canvas-editor-border-color);
-  border-radius: var(--feedback-modal-button-border-radius);
-  padding: 4px;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .10);
-}
-
-.tool-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  background: none;
-  border-radius: var(--feedback-modal-button-border-radius);
-  cursor: pointer;
-  color: var(--feedback-canvas-editor-tool-text-color);
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.tool-btn:hover {
-  background: var(--feedback-canvas-editor-tool-bg-hover);
-  color: var(--feedback-modal-button-text-color-active);
-}
-
-.tool-btn.active {
-  background: var(--feedback-canvas-editor-tool-bg-active);
-  color: var(--feedback-canvas-editor-tool-text-active);
-}
-
-.tool-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.tool-btn:disabled:hover {
-  background: none;
-  color: var(--feedback-canvas-editor-tool-text-color);
-}
-
-.toolbar-divider {
-  width: 1px;
-  height: 20px;
-  background: var(--feedback-canvas-editor-divider-color);
-  margin: 0 6px;
-}
-
-.undo-btn {
-  background: var(--feedback-canvas-editor-tool-bg-color) !important;
-  border: 1px solid var(--feedback-canvas-editor-border-color) !important;
-}
-
-.undo-btn:hover:not(:disabled) {
-  background: var(--feedback-canvas-editor-tool-bg-hover) !important;
-}
-
-.color-palette {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--feedback-canvas-editor-tool-bg-color);
-  border: 1px solid var(--feedback-canvas-editor-border-color);
-  border-radius: var(--feedback-modal-button-border-radius);
-  padding: 6px;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .10);
-}
-
-.color-slot-wrapper {
-  position: relative;
-}
-
-.color-btn {
-  width: 28px;
-  height: 28px;
-  border-radius: var(--feedback-modal-button-border-radius);
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .15);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.color-btn:hover {
-  transform: scale(1.05);
-  box-shadow: 0px 2px 4px 0px rgba(60, 64, 67, .25);
-}
-
-.color-btn.active {
-  border-color: var(--feedback-primary-color);
-  transform: scale(1.1);
-  box-shadow: 0 0 0 2px rgba(0, 112, 244, 0.2);
-}
-
-.color-btn.editing {
-  border-color: var(--feedback-highlight-color);
-  box-shadow: 0 0 0 2px rgba(255, 180, 34, 0.3);
-}
-
-.color-btn.editing:hover {
-  border-color: var(--feedback-highlight-color);
-  box-shadow: 0 0 0 2px rgba(255, 180, 34, 0.4);
-}
-
-.color-picker-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 6px;
-  background: var(--feedback-canvas-editor-tool-bg-color);
-  border: 1px solid var(--feedback-canvas-editor-border-color);
-  border-radius: var(--feedback-modal-button-border-radius);
-  padding: 6px;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
-  z-index: 1000;
-}
-
-.color-picker-dropdown input[type="color"] {
-  width: 50px;
-  height: 32px;
-  border: none;
-  border-radius: var(--feedback-modal-button-border-radius);
-  cursor: pointer;
-}
-
-.size-control {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: var(--feedback-canvas-editor-tool-bg-color);
-  border: 1px solid var(--feedback-canvas-editor-border-color);
-  border-radius: var(--feedback-modal-button-border-radius);
-  padding: 6px 12px;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .10);
-}
-
-.size-slider {
-  width: 70px;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--feedback-canvas-editor-slider-track);
-  outline: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  border: none;
-}
-
-.size-slider::-webkit-slider-track {
-  width: 100%;
-  height: 4px;
-  cursor: pointer;
-  background: var(--feedback-canvas-editor-slider-track);
-  border-radius: 2px;
-  border: none;
-  box-shadow: none;
-}
-
-.size-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--feedback-primary-color);
-  cursor: pointer;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .20);
-  border: none;
-  margin-top: -5px; /* Center the thumb on the track */
-}
-
-.size-slider::-moz-range-track {
-  width: 100%;
-  height: 4px;
-  cursor: pointer;
-  background: var(--feedback-canvas-editor-slider-track);
-  border-radius: 2px;
-  border: none;
-  box-shadow: none;
-}
-
-.size-slider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--feedback-primary-color);
-  cursor: pointer;
-  border: none;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .20);
-}
-
-/* Firefox specific fix */
-.size-slider::-moz-range-progress {
-  background: var(--feedback-canvas-editor-slider-track);
-  height: 4px;
-  border-radius: 2px;
-}
-
-/* IE/Edge specific */
-.size-slider::-ms-track {
-  width: 100%;
-  height: 4px;
-  cursor: pointer;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
-
-.size-slider::-ms-fill-lower {
-  background: var(--feedback-canvas-editor-slider-track);
-  border-radius: 2px;
-}
-
-.size-slider::-ms-fill-upper {
-  background: var(--feedback-canvas-editor-slider-track);
-  border-radius: 2px;
-}
-
-.size-slider::-ms-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--feedback-primary-color);
-  cursor: pointer;
-  border: none;
-}
-
-.size-value {
-  font-weight: 500;
-  color: var(--feedback-canvas-editor-tool-text-color);
-  font-size: var(--feedback-text-font-size);
-  min-width: 30px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 12px;
-  border: 1px solid var(--feedback-canvas-editor-action-secondary-border);
-  border-radius: var(--feedback-modal-button-border-radius);
-  cursor: pointer;
-  font-size: var(--feedback-modal-button-font-size);
-  font-weight: 500;
-  transition: all 0.2s ease;
-  min-width: 65px;
-  justify-content: center;
-  height: 36px;
-  font-family: var(--feedback-font-family);
-}
-
-.action-btn.secondary {
-  background: var(--feedback-canvas-editor-action-secondary-bg);
-  color: var(--feedback-canvas-editor-action-secondary-text);
-  border-color: var(--feedback-canvas-editor-action-secondary-border);
-}
-
-.action-btn.secondary:hover {
-  background: var(--feedback-canvas-editor-tool-bg-hover);
-  color: var(--feedback-modal-button-text-color-active);
-  border-color: var(--feedback-modal-button-border-color-active);
-}
-
-.action-btn.primary {
-  background: var(--feedback-canvas-editor-action-primary-bg);
-  color: var(--feedback-canvas-editor-action-primary-text);
-  border-color: var(--feedback-modal-button-border-color-active);
-}
-
-.action-btn.primary:hover {
-  background: var(--feedback-modal-button-submit-bg-color-hover);
-  border-color: var(--feedback-modal-button-submit-border-color-hover);
-}
-
-.canvas-editor-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: var(--feedback-canvas-editor-content-bg);
-  overflow: hidden;
-  min-height: 0;
-  min-width: 0;
-}
-
-.annotation-canvas {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
-  cursor: crosshair;
-  border-radius: var(--feedback-modal-content-border-radius);
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
-  background: var(--feedback-white-color);
-  transition: box-shadow 0.3s ease;
-  object-fit: contain;
-  display: block;
-}
-
-.annotation-canvas:hover {
-  box-shadow: 0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20);
-}
-
-/* Responsive Design */
-@media screen and (min-width: 768px) {
-  .feedback-modal-content {
-    max-width: var(--feedback-modal-content-max-width);
-  }
-  
-  .feedback-modal-content.feedback-modal-content--bottom-right {
-    bottom: var(--feedback-modal-content-position-bottom);
-    left: initial;
-    right: var(--feedback-modal-content-position-right);
-    top: initial;
-    transform: initial;
-  }
-
-  .feedback-modal-content.feedback-modal-content--bottom-left {
-    bottom: var(--feedback-modal-content-position-bottom);
-    left: var(--feedback-modal-content-position-left);
-    top: initial;
-    transform: initial;
-  }
-
-  .feedback-modal-content.feedback-modal-content--top-right {
-    right: var(--feedback-modal-content-position-right);
-    top: var(--feedback-modal-content-position-top);
-    transform: initial;
-  }
-
-  .feedback-modal-content.feedback-modal-content--top-left {
-    left: var(--feedback-modal-content-position-left);
-    top: var(--feedback-modal-content-position-top);
-    transform: initial;
-  } 
-
-  .feedback-modal-content.feedback-modal-content--center-left {
-    left: 5px;
-    right: auto;
-    top: 50%;
-    transform: translateY(-50%);
-  } 
-
-  .feedback-modal-content.feedback-modal-content--center-right {
-    left: auto;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,
-  .feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{
-    transform: translateX(0);
-  }
-
-  .feedback-modal-content.feedback-modal-content--sidebar-left {
-    max-width: var(--feedback-modal-content-sidebar-max-width);
-    left: 0;
-    right: auto;
-    height: 100vh;
-    top: 0;
-    transform: translateX(-100%);
-    transition: transform 0.5s ease-in-out; 
-    border-radius: 0;
-  }
-
-  .feedback-modal-content.feedback-modal-content--sidebar-right {
-    max-width: var(--feedback-modal-content-sidebar-max-width);
-    left: auto;
-    right: 0;
-    height: 100vh;
-    top: 0;
-    transform: translateX(100%);
-    transition: transform 0.5s ease-in-out; 
-    border-radius: 0;
-  }
-
-  .feedback-modal-text textarea {
-    height: 150px;
-    min-height: 150px;
-  }
-
-  /* Animations */
-  .feedback-modal-content.feedback-modal-content--bottom-right {
-    transform: translateY(20px);
-  }
-
-  .feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open {
-    transform: translateY(0);
-  }
-
-  .feedback-modal-content.feedback-modal-content--bottom-left {
-    transform: translateY(20px);
-  }
-
-  .feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open {
-    transform: translateY(0);
-  }
-
-  .feedback-modal-content.feedback-modal-content--top-right {
-    transform: translateY(-20px);
-  }
-
-  .feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open {
-    transform: translateY(0);
-  }
-
-  .feedback-modal-content.feedback-modal-content--top-left {
-    transform: translateY(-20px);
-  }
-
-  .feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open {
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 768px) {
-  .canvas-editor-modal {
-    width: 100vw;
-    height: 100vh;
-    border-radius: 0;
-  }
-  
-  .canvas-editor-header {
-    padding: 8px 12px;
-    gap: 8px;
-  }
-  
-  .canvas-editor-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-  }
-  
-  .toolbar-section {
-    justify-content: center;
-  }
-  
-  .toolbar-section:last-child {
-    margin-left: 0;
-    justify-content: stretch;
-    gap: 8px;
-  }
-  
-  .action-btn {
-    flex: 1;
-    min-width: auto;
-  }
-  
-  .canvas-editor-content {
-    padding: 8px;
-  }
-  
-  .tool-group {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  .color-palette {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  .size-control {
-    flex-direction: column;
-    gap: 6px;
-    text-align: center;
-  }
-  
-  .size-slider {
-    width: 100px;
-  }
-}
-
-/* Feather loader animation */
-@keyframes feather-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.feather-loader {
-  animation: feather-spin 1s linear infinite;
-  display: block;
-}
-
-/* Screenshot Error Notification */
-.screenshot-error-notification {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10001;
-  max-width: 500px;
-  width: 90%;
-  animation: slideDown 0.3s ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-.screenshot-error-content {
-  background: #fee;
-  border: 1px solid #fcc;
-  border-radius: 8px;
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  color: #c53030;
-}
-
-.screenshot-error-content svg:first-child {
-  color: #e53e3e;
-  flex-shrink: 0;
-}
-
-.screenshot-error-content span {
-  flex: 1;
-  font-size: 14px;
-  line-height: 1.4;
-  font-weight: 500;
-}
-
-.error-close-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  color: #c53030;
-  flex-shrink: 0;
-  transition: background-color 0.2s ease;
-}
-
-.error-close-btn:hover {
-  background: rgba(197, 48, 48, 0.1);
-}
-
-/* Hide annotation controls on mobile */
-@media (max-width: 768px) {
-  .canvas-editor-toolbar .tool-group,
-  .canvas-editor-toolbar .color-palette,
-  .canvas-editor-toolbar .size-control,
-  .canvas-editor-toolbar .toolbar-divider {
-    display: none !important;
-  }
-  
-  .canvas-editor-toolbar {
-    justify-content: center;
-  }
-  
-  .canvas-editor-toolbar .toolbar-section:first-child {
-    display: none;
-  }
-  
-  .canvas-editor-toolbar .toolbar-section:nth-child(2) {
-    display: none;
-  }
-  
-  .canvas-editor-toolbar .toolbar-section:nth-child(3) {
-    display: none;
-  }
-  
-  .canvas-editor-title {
-    display: none;
-  }
-}