@m6d/cortex-react 0.6.1 → 0.8.0

package/dist/styles.css

@@ -55,6 +55,14 @@
     monospace
   );
   --cortex-font-size: 0.8125rem;
+  /* These read --cortex-font-size (or the color named) when unset, so they ship
+   * unset: declaring one here gives that part its own value.
+   *
+   * --cortex-font-size-message: 0.875rem;      message bubbles and the composer
+   * --cortex-font-size-header: 0.875rem;       the chat and history titles
+   * --cortex-color-send-empty: transparent;    the send button with nothing to send
+   * --cortex-color-send-empty-text: var(--cortex-color-text-muted);
+   */
   /* The widget's headings read --cortex-font-display and fall back to `inherit`,
    * so it ships unset on purpose — declaring it here is how you opt in:
    *
@@ -333,71 +341,6 @@
   overflow: hidden;
 }
 
-@keyframes cortex-working-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes cortex-dot-wave {
-  0%, 60%, 100% {
-    transform: translateY(0) scale(1);
-    opacity: 0.45;
-  }
-  30% {
-    transform: translateY(-5px) scale(1.2);
-    opacity: 1;
-  }
-}
-@keyframes cortex-working-shimmer {
-  0% {
-    background-position: -200% center;
-  }
-  100% {
-    background-position: 200% center;
-  }
-}
-.cortex-widget__working {
-  flex-shrink: 0;
-  padding: 0.5rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  animation: cortex-working-slide-in 0.25s ease-out both;
-}
-
-.cortex-widget__working-dots {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.cortex-working-dot {
-  display: block;
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  background: var(--cortex-color-success);
-  animation: cortex-dot-wave 1.4s ease-in-out infinite;
-}
-.cortex-working-dot:nth-child(2) {
-  animation-delay: 0.15s;
-}
-.cortex-working-dot:nth-child(3) {
-  animation-delay: 0.3s;
-}
-
-.cortex-widget__working-text {
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  color: var(--cortex-color-success);
-}
-
 .cortex-widget__container--full {
   display: flex;
   flex-direction: row;
@@ -429,8 +372,13 @@
 .cortex-widget__container--full .cortex-widget__history-btn {
   display: none;
 }
+@media (min-width: 769px) {
+  .cortex-widget__container--full > .cortex-widget__screen:nth-child(2) .cortex-widget__new-btn {
+    display: none;
+  }
+}
 .cortex-widget__container--full .cortex-widget__chat-title {
-  font-size: 0.875rem;
+  font-size: var(--cortex-font-size-header, 0.875rem);
 }
 .cortex-widget__container--full .cortex-widget__chat-header {
   background: var(--cortex-color-surface);
@@ -444,9 +392,6 @@
 .cortex-widget__container--full .cortex-widget__input-area {
   padding: 0.75rem 2rem 1.25rem;
 }
-.cortex-widget__container--full .cortex-widget__working {
-  padding: 0.5rem 2rem;
-}
 @media (max-width: 768px) {
   .cortex-widget__container--full > .cortex-widget__screen:first-child {
     position: fixed;
@@ -496,9 +441,6 @@
   .cortex-widget__container--full .cortex-widget__input-area {
     padding: 0.75rem;
   }
-  .cortex-widget__container--full .cortex-widget__working {
-    padding: 0.5rem 1rem;
-  }
 }
 
 @media (max-width: 768px) {
@@ -535,8 +477,7 @@
   background: var(--cortex-color-surface);
 }
 
-.cortex-widget__back-btn,
-.cortex-widget__history-btn {
+.cortex-widget__header-btn {
   flex-shrink: 0;
   width: 2rem;
   height: 2rem;
@@ -550,8 +491,7 @@
   transition: color 0.15s, background-color 0.15s;
   color: var(--cortex-color-text-muted);
 }
-.cortex-widget__back-btn:hover,
-.cortex-widget__history-btn:hover {
+.cortex-widget__header-btn:hover {
   color: var(--cortex-color-text);
   background: var(--cortex-color-surface-muted);
 }
@@ -567,7 +507,7 @@
 
 .cortex-widget__chat-title {
   font-family: var(--cortex-font-display, inherit);
-  font-size: var(--cortex-font-size);
+  font-size: var(--cortex-font-size-header, var(--cortex-font-size));
   font-weight: 500;
   color: var(--cortex-color-text-strong);
   overflow: hidden;
@@ -731,13 +671,8 @@ cortex-llm-usage-chips {
   border-radius: calc(var(--cortex-radius) * 1.5);
   border: 1px solid var(--cortex-color-border);
   padding: 0.375rem;
-  transition: border-color 0.15s, background-color 0.15s;
-}
-.cortex-widget__input-box--disabled {
-  background: var(--cortex-color-surface-muted);
-}
-.cortex-widget__input-box--enabled {
   background: color-mix(in oklab, var(--cortex-color-surface-subtle) 45%, var(--cortex-color-surface));
+  transition: border-color 0.15s, background-color 0.15s;
 }
 .cortex-widget__input-box--enabled:focus-within {
   border-color: var(--cortex-color-border-strong);
@@ -749,16 +684,23 @@ cortex-llm-usage-chips {
   background: var(--cortex-color-surface-muted);
 }
 
-.cortex-widget__textarea {
-  flex: 1;
+.cortex-widget__textarea,
+.cortex-widget__textarea:focus,
+.cortex-widget__textarea:focus-visible,
+.cortex-widget__textarea:disabled {
   background: transparent;
-  resize: none;
   border: 0;
   outline: none;
-  font-size: var(--cortex-font-size);
+  box-shadow: none;
+}
+
+.cortex-widget__textarea {
+  flex: 1;
+  resize: none;
+  font-size: var(--cortex-font-size-message, var(--cortex-font-size));
   padding: 0.375rem 0.5rem;
   min-height: 28px;
-  max-height: calc(5.5 * var(--cortex-font-size) + 0.75rem);
+  max-height: calc(5.5 * var(--cortex-font-size-message, var(--cortex-font-size)) + 0.75rem);
   overflow-y: auto;
   line-height: 1.375;
   color: var(--cortex-color-text-strong);
@@ -772,7 +714,6 @@ cortex-llm-usage-chips {
 }
 .cortex-widget__textarea:disabled {
   cursor: not-allowed;
-  border: 0;
 }
 
 .cortex-widget__input-actions {
@@ -879,8 +820,8 @@ cortex-llm-usage-chips {
   cursor: default;
 }
 .cortex-widget__send-btn--empty {
-  background: var(--cortex-color-border);
-  color: var(--cortex-color-text-muted);
+  background: var(--cortex-color-send-empty, transparent);
+  color: var(--cortex-color-send-empty-text, var(--cortex-color-text-muted));
 }
 .cortex-widget__send-btn--ready {
   background: var(--cortex-color-primary);
@@ -902,13 +843,13 @@ cortex-llm-usage-chips {
   align-items: center;
   gap: 0.75rem;
 }
-.cortex-widget__threads-header .cortex-widget__new-chat-btn {
+.cortex-widget__threads-header .cortex-widget__new-btn {
   margin-inline-start: auto;
 }
 
 .cortex-widget__threads-title {
   font-family: var(--cortex-font-display, inherit);
-  font-size: 0.9375rem;
+  font-size: var(--cortex-font-size-header, 0.9375rem);
   font-weight: 600;
   color: var(--cortex-color-text-heading);
   letter-spacing: -0.01em;
@@ -1201,22 +1142,167 @@ cortex-llm-usage-chips {
 .cortex-message-list {
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
   width: 100%;
   padding: 1rem;
 }
 
 .cortex-message-list__content {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
+.cortex-message-list__content--settling {
+  animation: cortex-content-settle 420ms cubic-bezier(0.76, 0, 0.24, 1) both;
+}
 
+@keyframes cortex-content-settle {
+  from {
+    translate: 0 var(--cortex-slide);
+  }
+}
+.cortex-widget__screen > .cortex-send-flight {
+  position: absolute;
+  z-index: 2;
+  margin: 0;
+  max-width: none;
+  pointer-events: none;
+  animation: cortex-send-fade 80ms linear both, cortex-send-fly 420ms cubic-bezier(0.76, 0, 0.24, 1) both;
+}
+
+@keyframes cortex-send-fade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes cortex-send-fly {
+  from {
+    translate: var(--cortex-fly-x) var(--cortex-fly-y);
+  }
+}
+.cortex-working-thinking {
+  padding-inline-start: 2rem;
+  --cortex-reveal-from: -1rem;
+  --cortex-reveal-mask: linear-gradient(to right, #000 40%, rgb(0 0 0 / 0.35) 60%);
+  --cortex-reveal-start: 100%;
+  --cortex-reveal-end: 0%;
+  animation: cortex-part-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+[dir=rtl] .cortex-working-thinking {
+  --cortex-reveal-from: 1rem;
+  --cortex-reveal-mask: linear-gradient(to left, #000 40%, rgb(0 0 0 / 0.35) 60%);
+  --cortex-reveal-start: 0%;
+  --cortex-reveal-end: 100%;
+}
+
+.cortex-working-avatar {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: 1;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--cortex-color-accent);
+  color: var(--cortex-color-primary-foreground);
+  translate: 0 var(--cortex-avatar-y, 0);
+  visibility: hidden;
+  pointer-events: none;
+}
+.cortex-working-avatar svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.cortex-working-avatar--shown {
+  visibility: visible;
+  transition: translate 420ms cubic-bezier(0.76, 0, 0.24, 1);
+  animation: cortex-avatar-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.cortex-working-avatar--leaving {
+  animation: cortex-avatar-out 360ms cubic-bezier(0.5, 0, 0.75, 0) 120ms both;
+}
+
+.cortex-working-avatar__ring {
+  position: absolute;
+  inset: -0.25rem;
+  border-radius: 9999px;
+  border: 1.5px solid color-mix(in oklab, var(--cortex-color-accent) 18%, transparent);
+  border-top-color: var(--cortex-color-accent);
+  border-right-color: color-mix(in oklab, var(--cortex-color-accent) 45%, transparent);
+}
+.cortex-working-avatar--shown .cortex-working-avatar__ring {
+  animation: cortex-tool-spin 1s linear infinite;
+}
+.cortex-working-avatar--leaving .cortex-working-avatar__ring {
+  animation: cortex-avatar-ring-out 220ms ease-out both;
+}
+
+@keyframes cortex-avatar-in {
+  from {
+    opacity: 0;
+    transform: translateY(2.5rem) scale(0.7);
+  }
+}
+@keyframes cortex-avatar-out {
+  to {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes cortex-avatar-ring-out {
+  to {
+    opacity: 0;
+  }
+}
 .cortex-message {
   min-width: 0;
+  transition: margin-block-start 420ms cubic-bezier(0.76, 0, 0.24, 1);
 }
 .cortex-message:empty {
   display: none;
 }
+.cortex-message:has(.cortex-message-part--folded):not(:has(.cortex-message-part:not(.cortex-message-part--folded))) {
+  margin-block-start: -0.5rem;
+  transition-delay: 600ms;
+}
+
+.cortex-text-bubble--assistant,
+.cortex-subtle-activity,
+.cortex-tool-pill,
+.cortex-tool-pill .cortex-tool-pill__icon {
+  transition: translate 420ms cubic-bezier(0.76, 0, 0.24, 1) 160ms;
+}
+
+.cortex-message--working-turn .cortex-text-bubble--assistant,
+.cortex-message--working-turn .cortex-subtle-activity,
+.cortex-message--working-turn .cortex-tool-pill,
+.cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
+  transition-delay: 0s;
+}
+.cortex-message--working-turn .cortex-text-bubble--assistant,
+.cortex-message--working-turn .cortex-subtle-activity {
+  translate: 2rem;
+}
+[dir=rtl] .cortex-message--working-turn .cortex-text-bubble--assistant,
+[dir=rtl] .cortex-message--working-turn .cortex-subtle-activity {
+  translate: -2rem;
+}
+.cortex-message--working-turn .cortex-tool-pill {
+  translate: 0.875rem;
+}
+[dir=rtl] .cortex-message--working-turn .cortex-tool-pill {
+  translate: -0.875rem;
+}
+.cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
+  translate: -0.5rem;
+}
+[dir=rtl] .cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
+  translate: 0.5rem;
+}
 
 .cortex-message-parts {
   width: 100%;
@@ -1259,25 +1345,68 @@ cortex-llm-usage-chips {
 }
 
 .cortex-message-part {
-  display: block;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 1fr;
   min-width: 0;
+  transition: grid-template-rows 420ms cubic-bezier(0.76, 0, 0.24, 1), margin-block-end 420ms cubic-bezier(0.76, 0, 0.24, 1), opacity 300ms ease, visibility 0s, overflow 0s 420ms allow-discrete;
+}
+.cortex-message-part > * {
+  min-height: 0;
 }
 .cortex-message-part:empty {
   display: none;
 }
+.cortex-message-part--folded {
+  grid-template-rows: 0fr;
+  margin-block-end: -0.5rem;
+  opacity: 0;
+  overflow: clip;
+  visibility: hidden;
+  transition-delay: 600ms, 600ms, 600ms, 1020ms, 0s;
+}
+
+[data-cortex-frontier] .cortex-tool-pill__spinner {
+  visibility: hidden;
+}
+[data-cortex-frontier] .cortex-subtle-activity__dots {
+  display: none;
+}
 
 .cortex-message-part--animated {
-  animation: cortex-part-fade-in-up 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  --cortex-reveal-from: -1rem;
+  --cortex-reveal-mask: linear-gradient(to right, #000 40%, rgb(0 0 0 / 0.35) 60%);
+  --cortex-reveal-start: 100%;
+  --cortex-reveal-end: 0%;
+  animation: cortex-part-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+[dir=rtl] .cortex-message-part--animated {
+  --cortex-reveal-from: 1rem;
+  --cortex-reveal-mask: linear-gradient(to left, #000 40%, rgb(0 0 0 / 0.35) 60%);
+  --cortex-reveal-start: 0%;
+  --cortex-reveal-end: 100%;
 }
 
-@keyframes cortex-part-fade-in-up {
+@keyframes cortex-part-reveal {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateX(var(--cortex-reveal-from));
+    filter: blur(5px);
+    mask-image: var(--cortex-reveal-mask);
+    mask-size: 300% 100%;
+    mask-repeat: no-repeat;
+    mask-position: var(--cortex-reveal-start) 0;
   }
-  to {
+  40% {
     opacity: 1;
-    transform: translateY(0);
+  }
+  to {
+    transform: none;
+    filter: none;
+    mask-image: var(--cortex-reveal-mask);
+    mask-size: 300% 100%;
+    mask-repeat: no-repeat;
+    mask-position: var(--cortex-reveal-end) 0;
   }
 }
 .cortex-unhandled-type {
@@ -1308,7 +1437,7 @@ cortex-llm-usage-chips {
   max-width: 80%;
   min-width: 0;
   overflow-wrap: anywhere;
-  font-size: var(--cortex-font-size);
+  font-size: var(--cortex-font-size-message, var(--cortex-font-size));
   line-height: 1.625;
   padding: 1rem;
   border-radius: calc(var(--cortex-radius) * 2);
@@ -1585,6 +1714,92 @@ cortex-llm-usage-chips {
   color: var(--cortex-color-text-muted);
 }
 
+.cortex-table-block {
+  display: block;
+  margin: 0.5em 0 0.75em;
+}
+.cortex-table-block th {
+  white-space: nowrap;
+}
+.cortex-table-block td {
+  max-width: 20rem;
+}
+.cortex-table-block table {
+  margin: 0;
+}
+
+.cortex-table-block__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.125rem;
+  min-height: 1.75rem;
+  margin-bottom: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.cortex-table-block:hover .cortex-table-block__actions, .cortex-table-block:focus-within .cortex-table-block__actions {
+  opacity: 1;
+}
+@media (hover: none) {
+  .cortex-table-block__actions {
+    opacity: 1;
+  }
+}
+
+.cortex-table-block__action {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--cortex-color-text-muted);
+}
+.cortex-table-block__action:hover {
+  color: var(--cortex-color-text);
+  background: var(--cortex-color-hover);
+}
+
+.cortex-table-block__dialog {
+  width: min(72rem, 100vw - 2rem);
+  max-width: none;
+  max-height: calc(100vh - 2rem);
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: calc(var(--cortex-radius) * 1.5);
+  background: var(--cortex-color-surface);
+  color: var(--cortex-color-text-strong);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+}
+.cortex-table-block__dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+.cortex-table-block__dialog::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.cortex-table-block__dialog-head {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.125rem;
+  padding: 0.375rem;
+  border-bottom: 1px solid var(--cortex-color-border);
+}
+
+.cortex-table-block__dialog-body {
+  overflow: auto;
+  padding: 0 1rem;
+}
+
 .cortex-reasoning-details {
   width: 100%;
   border-radius: var(--cortex-radius);
@@ -2207,51 +2422,125 @@ details[open] > summary .cortex-debug-tool__chevron {
   font-variant-numeric: tabular-nums;
 }
 
-.cortex-tool-pill--gated {
+.cortex-approval-card {
+  display: block;
+  max-width: min(100%, 28rem);
+  margin: 0.25rem 0;
   border: 1px solid var(--cortex-color-border);
-  border-radius: 9999px;
-  background: var(--cortex-color-surface-subtle);
-  padding: 0.3rem 0.75rem 0.3rem 0.65rem;
-  gap: 0.6rem;
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  overflow: hidden;
 }
-
-.cortex-tool-pill--asking {
-  padding-inline-end: 0.3rem;
-  flex-wrap: wrap;
+.cortex-approval-card--asking {
+  border-color: color-mix(in oklab, var(--cortex-color-accent) 45%, var(--cortex-color-border));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cortex-color-accent) 10%, transparent);
 }
 
-.cortex-tool-pill__dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  background: var(--cortex-color-accent);
+.cortex-approval-card__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cortex-color-accent);
 }
 
-.cortex-tool-pill--gated .cortex-tool-pill__title {
+.cortex-approval-card__sentence {
+  margin: 0;
+  padding: 0.375rem 0.75rem 0.5rem;
+  font-weight: 600;
   color: var(--cortex-color-text-heading);
-  white-space: normal;
 }
 
-.cortex-tool-pill__actions {
+.cortex-approval-card__sentence--full {
+  padding-top: 0;
+  font-weight: 400;
+  color: var(--cortex-color-text-strong);
+}
+
+.cortex-approval-card__rows {
+  display: grid;
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  gap: 0.1875rem 0.75rem;
+  margin: 0;
+  padding: 0 0.75rem 0.75rem;
+  font-size: 0.78125rem;
+}
+.cortex-approval-card__rows dt {
+  color: var(--cortex-color-text-secondary);
+  overflow-wrap: anywhere;
+}
+.cortex-approval-card__rows dd {
+  max-height: 6rem;
+  margin: 0;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  color: var(--cortex-color-text-strong);
+  overflow-wrap: anywhere;
+}
+
+.cortex-approval-card__foot {
   display: flex;
-  gap: 0.3rem;
-  margin-inline-start: 0.25rem;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border-top: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface-subtle);
 }
 
-.cortex-tool-pill__action {
+.cortex-approval-card__button {
   border: 1px solid var(--cortex-color-border-strong);
-  border-radius: 9999px;
-  background: none;
-  padding: 4px 11px;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  background: var(--cortex-color-surface);
+  padding: 0.375rem 0.875rem;
   font: inherit;
-  font-size: 12.5px;
-  color: var(--cortex-color-text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--cortex-color-text-strong);
   cursor: pointer;
 }
-.cortex-tool-pill__action--approve {
-  background: var(--cortex-color-accent);
+.cortex-approval-card__button--approve {
   border-color: var(--cortex-color-accent);
-  color: #fff;
+  background: var(--cortex-color-accent);
+  color: var(--cortex-color-primary-foreground);
+}
+
+.cortex-approval-card__line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-approval-card__line .cortex-tool-pill__icon {
+  flex-shrink: 0;
+}
+
+.cortex-approval-card__decision {
+  font-weight: 600;
+  color: var(--cortex-color-text-strong);
+}
+
+.cortex-approval-card__summary {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cortex-approval-card__details {
+  flex-shrink: 0;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-secondary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
 }
 
 .cortex-tool-fold {
@@ -3375,7 +3664,9 @@ html[dir=ltr] .cortex-llm-inspector__trigger {
   .cortex-widget *::before,
   .cortex-widget *::after {
     animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
   }
 }