@akropolys/kiku 1.7.3 → 1.7.5

package/dist/styles.css

@@ -603,41 +603,128 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    gap: 20px;
-    padding: 60px 32px;
-    text-align: center;
-    background:
-      radial-gradient(
-        circle at center,
-        rgba(var(--hsk-primary-rgb, 255, 106, 51), 0.08) 0%,
-        transparent 60%);
+    gap: 14px;
+    padding: 40px clamp(24px, 6%, 56px) 48px;
+    text-align: left;
   }
-  .hsk-cb-empty-icon {
-    font-size: 48px;
-    color: var(--hsk-primary);
-    display: flex;
-    align-items: center;
-    animation: hsk-sparkle-spin 4s linear infinite;
+  .hsk-cb-hello {
+    margin: 0;
+    font-size: clamp(30px, 6.5vw, 48px);
+    font-weight: 400;
+    line-height: 1.04;
+    letter-spacing: -0.025em;
+    color: var(--hsk-chat-text, #111);
   }
-  .hsk-cb-empty-title {
-    font-size: 26px;
+  .hsk-cb-hello b {
+    font-weight: 600;
+    color: var(--hsk-primary, #ff6a33);
+  }
+  .hsk-cb-hello-lead {
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--hsk-chat-muted, #5f6368);
+    max-width: 34ch;
+  }
+  .hsk-cb-hello-ask {
+    margin: 6px 0 0;
+    font-size: 17px;
     font-weight: 500;
     color: var(--hsk-chat-text, #111);
-    letter-spacing: -.02em;
   }
-  .hsk-cb-empty-sub {
-    font-size: 14px;
-    color: var(--hsk-chat-muted, #5f6368);
-    line-height: 1.7;
-    max-width: 380px;
+  .hsk-cb-hello-skip {
+    padding: 0;
+    font-size: 13px;
+    color: var(--hsk-chat-muted, #888);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .hsk-cb-hello-skip:hover {
+    color: var(--hsk-chat-text, #111);
+  }
+  @keyframes hsk-hello-rise {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+      filter: blur(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
+  }
+  .hsk-cb-hello,
+  .hsk-cb-hello-lead,
+  .hsk-cb-hello-ask,
+  .hsk-cb-hello-skip {
+    opacity: 0;
+    animation: hsk-hello-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  .hsk-cb-hello {
+    animation-delay: 0.06s;
+  }
+  .hsk-cb-hello-lead {
+    animation-delay: 0.26s;
+  }
+  .hsk-cb-hello-ask {
+    animation-delay: 0.44s;
+  }
+  .hsk-cb-hello-skip {
+    animation-delay: 0.60s;
+  }
+  .hsk-cb-hello b {
+    background-image:
+      linear-gradient(
+        100deg,
+        currentColor 0%,
+        currentColor 42%,
+        rgba(255, 255, 255, 0.92) 50%,
+        currentColor 58%,
+        currentColor 100%);
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+    background-position: 130% 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: hsk-hello-sheen 4.5s ease-in-out 1s infinite;
+  }
+  @keyframes hsk-hello-sheen {
+    0% {
+      background-position: 130% 0;
+    }
+    55% {
+      background-position: -30% 0;
+    }
+    100% {
+      background-position: -30% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hsk-cb-hello,
+    .hsk-cb-hello-lead,
+    .hsk-cb-hello-ask,
+    .hsk-cb-hello-skip {
+      animation: none;
+      opacity: 1;
+      transform: none;
+      filter: none;
+    }
+    .hsk-cb-hello b {
+      animation: none;
+    }
   }
   .hsk-cb-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    justify-content: center;
+    justify-content: flex-start;
     margin-top: 4px;
   }
   .hsk-cb-chip {
@@ -926,6 +1013,32 @@
     fill: currentColor;
     opacity: 0.16;
   }
+  .hsk-cb-thinking-icon .hsk-brand-mark:not(.hsk-brand-mark--sheen) {
+    transform-origin: 50% 100%;
+    animation: hsk-glyph-settle 2.8s infinite;
+  }
+  @keyframes hsk-glyph-settle {
+    0%, 72% {
+      opacity: 0.16;
+      transform: scale(1);
+    }
+    82% {
+      opacity: 1;
+      transform: scale(1.07);
+      animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    90% {
+      transform: scale(0.97);
+    }
+    95% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0.16;
+      transform: scale(1);
+    }
+  }
   .hsk-cb-thinking-icon .hsk-brand-mark--sheen {
     opacity: 1;
     -webkit-mask-image:
@@ -1311,6 +1424,44 @@
     color: #ef4444;
     font-size: 13px;
   }
+  .hsk-cb-stopped {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 8px 0;
+    flex-wrap: wrap;
+  }
+  .hsk-cb-stopped-label {
+    font-size: 12.5px;
+    color: var(--hsk-chat-muted, #888);
+  }
+  .hsk-cb-continue {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 12px;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--hsk-chat-text, #111);
+    background: transparent;
+    border: 1.5px solid var(--hsk-chat-divide, rgba(0,0,0,.14));
+    border-radius: var(--hsk-border-radius, 0px);
+    cursor: pointer;
+    transition:
+      border-color .15s,
+      color .15s,
+      background .15s;
+  }
+  .hsk-cb-continue:hover {
+    border-color: var(--hsk-primary);
+    color: var(--hsk-primary);
+  }
+  @media (prefers-color-scheme: dark) {
+    .hsk-cb-continue {
+      border-color: rgba(255, 255, 255, .14);
+      color: #f0efed;
+    }
+  }
   @media (prefers-color-scheme: dark) {
     .hsk-cb-overlay {
       --hsk-chat-bg: #0a0a0a;
@@ -1336,10 +1487,13 @@
       border-color: rgba(255, 255, 255, .07);
       color: #888;
     }
-    .hsk-cb-empty-title {
+    .hsk-cb-hello {
+      color: #f0efed;
+    }
+    .hsk-cb-hello-ask {
       color: #f0efed;
     }
-    .hsk-cb-empty-sub {
+    .hsk-cb-hello-lead {
       color: #888;
     }
     .hsk-cb-chip {