@akropolys/kiku 1.7.4 → 1.7.6

package/dist/styles.css

@@ -603,61 +603,40 @@
     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-logo {
-    width: 52px;
-    height: 52px;
+  .hsk-cb-hello b {
+    font-weight: 600;
     color: var(--hsk-primary, #ff6a33);
   }
-  .hsk-cb-empty-logo .hsk-brand-mark {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-  }
-  .hsk-cb-empty-title {
-    font-size: 26px;
-    font-weight: 500;
-    color: var(--hsk-chat-text, #111);
-    letter-spacing: -.02em;
-  }
-  .hsk-cb-empty-sub {
-    font-size: 14px;
+  .hsk-cb-hello-lead {
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.6;
     color: var(--hsk-chat-muted, #5f6368);
-    line-height: 1.7;
-    max-width: 380px;
-  }
-  .hsk-cb-onboard-title {
-    font-size: 34px;
-    font-weight: 600;
-    letter-spacing: -.03em;
+    max-width: 34ch;
   }
-  .hsk-cb-onboard-ask {
+  .hsk-cb-hello-ask {
+    margin: 6px 0 0;
     font-size: 17px;
     font-weight: 500;
     color: var(--hsk-chat-text, #111);
-    margin-top: 4px;
   }
-  .hsk-cb-onboard-skip {
-    margin-top: 2px;
-    padding: 4px 10px;
-    font-size: 12.5px;
+  .hsk-cb-hello-skip {
+    padding: 0;
+    font-size: 13px;
     color: var(--hsk-chat-muted, #888);
     background: transparent;
     border: none;
@@ -665,14 +644,56 @@
     text-decoration: underline;
     text-underline-offset: 3px;
   }
-  .hsk-cb-onboard-skip:hover {
+  .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;
+  }
+  @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-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    justify-content: center;
+    justify-content: flex-start;
     margin-top: 4px;
   }
   .hsk-cb-chip {
@@ -1372,6 +1393,69 @@
     color: #ef4444;
     font-size: 13px;
   }
+  .hsk-cb-memory-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    align-self: flex-start;
+    margin: 4px 0 10px;
+    padding: 9px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    text-decoration: none;
+    color: #fff;
+    background: var(--hsk-primary, #ff6a33);
+    border: none;
+    border-radius: var(--hsk-border-radius, 0px);
+    transition: opacity .15s;
+  }
+  .hsk-cb-memory-pill:hover {
+    opacity: .88;
+  }
+  .hsk-cb-think {
+    margin-bottom: 10px;
+    font-size: 12.5px;
+  }
+  .hsk-cb-think-head {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    font-weight: 500;
+    color: var(--hsk-chat-muted, #888);
+    cursor: pointer;
+    user-select: none;
+  }
+  .hsk-cb-think-head:hover {
+    color: var(--hsk-chat-text, #111);
+  }
+  .hsk-cb-think-spin {
+    animation: hsk-think-spin 3s linear infinite;
+  }
+  @keyframes hsk-think-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .hsk-cb-think-chevron {
+    font-size: 9px;
+    transition: transform .12s;
+  }
+  .hsk-cb-think-chevron--open {
+    transform: rotate(90deg);
+  }
+  .hsk-cb-think-body {
+    margin-top: 6px;
+    padding: 8px 10px;
+    border-left: 2px solid var(--hsk-chat-border, rgba(128,128,128,.25));
+    color: var(--hsk-chat-muted, #666);
+    white-space: pre-wrap;
+    line-height: 1.45;
+    font-style: italic;
+  }
   .hsk-cb-stopped {
     display: flex;
     align-items: center;
@@ -1435,10 +1519,13 @@
       border-color: rgba(255, 255, 255, .07);
       color: #888;
     }
-    .hsk-cb-empty-title {
+    .hsk-cb-hello {
       color: #f0efed;
     }
-    .hsk-cb-empty-sub {
+    .hsk-cb-hello-ask {
+      color: #f0efed;
+    }
+    .hsk-cb-hello-lead {
       color: #888;
     }
     .hsk-cb-chip {
@@ -2515,38 +2602,45 @@
   }
   .hsk-cb-phone-label {
     font-size: 0.875rem;
-    color: var(--hsk-text, inherit);
+    color: var(--hsk-chat-text, #111);
     margin: 0;
   }
   .hsk-cb-phone-input {
     width: 100%;
     box-sizing: border-box;
     padding: 8px 12px;
-    border: 1px solid var(--hsk-border, #e4e4e7);
-    border-radius: var(--hsk-radius, 8px);
-    background: var(--hsk-bg, #fff);
-    color: var(--hsk-text, inherit);
+    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
+    border-radius: var(--hsk-border-radius, 0px);
+    background: var(--hsk-chat-input-bg, rgba(0,0,0,.04));
+    color: var(--hsk-chat-text, #111);
     font-size: 0.9rem;
     outline: none;
     transition: border-color 0.15s;
   }
+  .hsk-cb-phone-input::placeholder {
+    color: var(--hsk-chat-muted, #888);
+  }
   .hsk-cb-phone-input:focus {
-    border-color: var(--hsk-primary, #6366f1);
+    border-color: var(--hsk-primary, #ff6a33);
   }
   .hsk-cb-phone-submit {
     align-self: flex-start;
     padding: 8px 16px;
-    border: 1px solid var(--hsk-border, #e4e4e7);
-    border-radius: var(--hsk-radius, 8px);
-    background: var(--hsk-bg, #fff);
-    color: var(--hsk-text, inherit);
+    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
+    border-radius: var(--hsk-border-radius, 0px);
+    background: transparent;
+    color: var(--hsk-chat-text, #111);
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
-    transition: background 0.15s, border-color 0.15s;
+    transition:
+      background 0.15s,
+      border-color 0.15s,
+      color 0.15s;
   }
   .hsk-cb-phone-submit:hover {
-    border-color: var(--hsk-primary, #6366f1);
+    border-color: var(--hsk-primary, #ff6a33);
+    color: var(--hsk-primary, #ff6a33);
   }
   .hsk-cb-main {
     flex: 1;