@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap

@@ -11,145 +11,258 @@ exports[`renders StartPanel for board of experts unchanged 1`] = `
       <div
         class="memori--board-of-experts"
       >
-        <div
-          class="memori-tooltip memori-tooltip--align-left"
+        <span
+          class="styles-module__root___-ALla"
         >
-          <div
-            class="memori-tooltip--trigger"
+          <span
+            class="styles-module__trigger___V2aIF"
+            id="base-ui-:rm:"
           >
-            <span
+            <button
               aria-label="boardOfExperts"
+              class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only"
+              tabindex="0"
+              type="button"
             >
-              <svg
-                aria-hidden="true"
-                fill="none"
-                focusable="false"
-                height="16"
-                role="img"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 640 512"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="memori-button__icon"
               >
-                <path
-                  d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-users"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+                  />
+                  <circle
+                    cx="9"
+                    cy="7"
+                    r="4"
+                  />
+                  <path
+                    d="M22 21v-2a4 4 0 0 0-3-3.87"
+                  />
+                  <path
+                    d="M16 3.13a4 4 0 0 1 0 7.75"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
       </div>
     </div>
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
       <div
-        class="memori--completion-provider-status--loading"
+        class="memori--description"
       >
-        <div
-          class="memori-spin memori-spin--spinning"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:ro:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -163,113 +276,208 @@ exports[`renders StartPanel on instruct unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.instructButton
-      </button>
       <div
-        class="memori--completion-provider-status--loading"
+        class="memori--description"
       >
-        <div
-          class="memori-spin memori-spin--spinning"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r1q:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.instructButton
+            </span>
+          </button>
         </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageInstructExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageInstructExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -283,113 +491,208 @@ exports[`renders StartPanel unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
       <div
-        class="memori--completion-provider-status--loading"
+        class="memori--description"
       >
-        <div
-          class="memori-spin memori-spin--spinning"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r1:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -403,115 +706,203 @@ exports[`renders StartPanel with completion provider down unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
-        <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+        <span
+          class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
         >
-          <div
-            class="memori-tooltip--trigger"
+          <span
+            class="styles-module__trigger___V2aIF"
+            id="base-ui-:r2s:"
           >
             <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
+              class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
+              <path
+                d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
               />
               <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+                d="M12 9v4"
               />
               <path
-                d="M12 17L12.01 17"
+                d="M12 17h.01"
               />
             </svg>
-          </div>
-        </div>
+          </span>
+        </span>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
       <div
-        class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
+        class="memori--description"
       >
+        <section
+          class="memori--start-panel__mobile-info"
+        >
+          <div
+            class="memori--start-panel__mobile-info-content"
+          >
+            <section
+              class="memori--settings-section"
+            >
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r2u:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
+          </div>
+        </section>
         <div
-          class="memori-tooltip--trigger"
-        >
-          <svg
-            aria-hidden="true"
-            class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
-            color="currentColor"
-            fill="none"
-            height="800px"
-            viewBox="0 0 24 24"
-            width="800px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -525,113 +916,208 @@ exports[`renders StartPanel with completions enabled unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
       <div
-        class="memori--completion-provider-status--loading"
+        class="memori--description"
       >
-        <div
-          class="memori-spin memori-spin--spinning"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:rf:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
-        </div>
-      </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
+        </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
+      </div>
     </div>
   </div>
 </div>
@@ -645,175 +1131,316 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
-        <div
-          class="memori-expandable memori--description-text"
-        >
-          <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
-          >
-            Lorem ipsum.
-          </div>
-        </div>
-      </p>
       <div
-        class="memori--start-privacy-explanation-container"
+        class="memori--title-container"
       >
-        <p
-          class="memori--start-privacy-explanation"
+        <picture
+          class="memori--avatar"
         >
-          write_and_speak.pagePrivacyExplanation
-        </p>
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-tooltip--trigger"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
-      <div
-        class="memori--completion-provider-status--loading"
-      >
         <div
-          class="memori-spin memori-spin--spinning"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
       <div
-        class="memori--deep-thought-disclaimer"
+        class="memori--description"
       >
-        <div
-          class="memori-tooltip memori-tooltip--align-left"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              fill="none"
-              focusable="false"
-              height="20"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 48 48"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M30.106 48v-2.745a2.213 2.213 0 012.213-2.212h6.11a2.392 2.392 0 002.326-2.466v-3.223a1.834 1.834 0 01.459-1.145 2.912 2.912 0 00.712-1.926l-.007-.667a1.016 1.016 0 01.651-.952h1.067a1.363 1.363 0 001.051-.456 1.304 1.304 0 00.19-1.395 67.032 67.032 0 01-3.037-7.51 4.767 4.767 0 01-.217-1.507l-.002-4.994a14.513 14.513 0 00-.552-3.963l-.006-.022a13.959 13.959 0 00-3.137-5.702q-.479-.516-1.006-1.003a17.67 17.67 0 00-.677-.623A18.303 18.303 0 0024.194 1a19.617 19.617 0 00-12.539 4.489 17.555 17.555 0 00-3.945 21.69C9.945 31.507 11.694 38.622 12.14 46v2"
-                stroke-miterlimit="10"
-              />
-              <path
-                d="M27.917 12L31.417 12"
-              />
-              <path
-                d="M27.917 26L31.417 26"
-              />
-              <path
-                d="M29.667 12L29.667 26"
-              />
-              <path
-                d="M23.992 26L19.904 12 19.226 12 15.159 26"
-              />
-              <path
-                d="M16.854 21.133L22.276 21.133"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row memori--settings-section__row--with-divider"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--info"
+                >
+                  <svg
+                    class="lucide lucide-info memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                    <path
+                      d="M12 16v-4"
+                    />
+                    <path
+                      d="M12 8h.01"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <p
+                    class="memori--settings-section__title"
+                  >
+                    deepThoughtDisclaimerTitle
+                  </p>
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__description"
+                    >
+                      deepThoughtPreDisclaimerUnlogged
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="memori--settings-section__actions-right"
+                >
+                  <button
+                    class="memori-button memori-button--toolbar memori-button--sm memori--settings-section__action"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="memori-button__content"
+                    >
+                      login.login
+                    </span>
+                  </button>
+                  <span
+                    class="styles-module__root___-ALla"
+                  >
+                    <span
+                      class="styles-module__trigger___V2aIF"
+                      id="base-ui-:r18:"
+                    >
+                      <button
+                        aria-label="deepThoughtHelper"
+                        class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="memori-button__content"
+                        >
+                          <svg
+                            class="lucide lucide-info memori--settings-section__inline-info-icon"
+                            fill="none"
+                            height="24"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle
+                              cx="12"
+                              cy="12"
+                              r="10"
+                            />
+                            <path
+                              d="M12 16v-4"
+                            />
+                            <path
+                              d="M12 8h.01"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </span>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r1a:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
-        </div>
-        <h2>
-          deepThought
-        </h2>
-        <p>
-          deepThoughtPreDisclaimerUnlogged
-        </p>
-        <p>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
           <button
-            class="memori-button memori-button--outlined memori-button--rounded"
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
           >
-            login.login
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
           </button>
-        </p>
+        </div>
         <p
-          class="memori--deep-thought-disclaimer-text"
+          class="memori--start-description"
         >
-          deepThoughtDisclaimer
+          write_and_speak.pageTryMeExplanation
         </p>
       </div>
     </div>
@@ -829,168 +1456,303 @@ exports[`renders StartPanel with deep thought enabled but without permission fla
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
-        <div
-          class="memori-expandable memori--description-text"
-        >
-          <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
-          >
-            Lorem ipsum.
-          </div>
-        </div>
-      </p>
       <div
-        class="memori--start-privacy-explanation-container"
+        class="memori--title-container"
       >
-        <p
-          class="memori--start-privacy-explanation"
+        <picture
+          class="memori--avatar"
         >
-          write_and_speak.pagePrivacyExplanation
-        </p>
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-tooltip--trigger"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
-      <div
-        class="memori--completion-provider-status--loading"
-      >
         <div
-          class="memori-spin memori-spin--spinning"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
       <div
-        class="memori--deep-thought-disclaimer"
+        class="memori--description"
       >
-        <div
-          class="memori-tooltip memori-tooltip--align-left"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              fill="none"
-              focusable="false"
-              height="20"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 48 48"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M30.106 48v-2.745a2.213 2.213 0 012.213-2.212h6.11a2.392 2.392 0 002.326-2.466v-3.223a1.834 1.834 0 01.459-1.145 2.912 2.912 0 00.712-1.926l-.007-.667a1.016 1.016 0 01.651-.952h1.067a1.363 1.363 0 001.051-.456 1.304 1.304 0 00.19-1.395 67.032 67.032 0 01-3.037-7.51 4.767 4.767 0 01-.217-1.507l-.002-4.994a14.513 14.513 0 00-.552-3.963l-.006-.022a13.959 13.959 0 00-3.137-5.702q-.479-.516-1.006-1.003a17.67 17.67 0 00-.677-.623A18.303 18.303 0 0024.194 1a19.617 19.617 0 00-12.539 4.489 17.555 17.555 0 00-3.945 21.69C9.945 31.507 11.694 38.622 12.14 46v2"
-                stroke-miterlimit="10"
-              />
-              <path
-                d="M27.917 12L31.417 12"
-              />
-              <path
-                d="M27.917 26L31.417 26"
-              />
-              <path
-                d="M29.667 12L29.667 26"
-              />
-              <path
-                d="M23.992 26L19.904 12 19.226 12 15.159 26"
-              />
-              <path
-                d="M16.854 21.133L22.276 21.133"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row memori--settings-section__row--with-divider"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--info"
+                >
+                  <svg
+                    class="lucide lucide-info memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                    <path
+                      d="M12 16v-4"
+                    />
+                    <path
+                      d="M12 8h.01"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <p
+                    class="memori--settings-section__title"
+                  >
+                    deepThoughtDisclaimerTitle
+                  </p>
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__description"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="memori--settings-section__actions-right"
+                >
+                  <span
+                    class="styles-module__root___-ALla"
+                  >
+                    <span
+                      class="styles-module__trigger___V2aIF"
+                      id="base-ui-:r1h:"
+                    >
+                      <button
+                        aria-label="deepThoughtHelper"
+                        class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="memori-button__content"
+                        >
+                          <svg
+                            class="lucide lucide-info memori--settings-section__inline-info-icon"
+                            fill="none"
+                            height="24"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle
+                              cx="12"
+                              cy="12"
+                              r="10"
+                            />
+                            <path
+                              d="M12 16v-4"
+                            />
+                            <path
+                              d="M12 8h.01"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </span>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r1j:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
-        <h2>
-          deepThought
-        </h2>
-        <p>
-          deepThoughtPreDisclaimerNotAllowed
-        </p>
         <p
-          class="memori--deep-thought-disclaimer-text"
+          class="memori--start-description"
         >
-          deepThoughtDisclaimer
+          write_and_speak.pageTryMeExplanation
         </p>
       </div>
     </div>
@@ -1006,165 +1768,303 @@ exports[`renders StartPanel with deep thought enabled unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
-        <div
-          class="memori-expandable memori--description-text"
-        >
-          <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
-          >
-            Lorem ipsum.
-          </div>
-        </div>
-      </p>
       <div
-        class="memori--start-privacy-explanation-container"
+        class="memori--title-container"
       >
-        <p
-          class="memori--start-privacy-explanation"
+        <picture
+          class="memori--avatar"
         >
-          write_and_speak.pagePrivacyExplanation
-        </p>
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-tooltip--trigger"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
-      <div
-        class="memori--completion-provider-status--loading"
-      >
         <div
-          class="memori-spin memori-spin--spinning"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
       <div
-        class="memori--deep-thought-disclaimer"
+        class="memori--description"
       >
-        <div
-          class="memori-tooltip memori-tooltip--align-left"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              fill="none"
-              focusable="false"
-              height="20"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 48 48"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M30.106 48v-2.745a2.213 2.213 0 012.213-2.212h6.11a2.392 2.392 0 002.326-2.466v-3.223a1.834 1.834 0 01.459-1.145 2.912 2.912 0 00.712-1.926l-.007-.667a1.016 1.016 0 01.651-.952h1.067a1.363 1.363 0 001.051-.456 1.304 1.304 0 00.19-1.395 67.032 67.032 0 01-3.037-7.51 4.767 4.767 0 01-.217-1.507l-.002-4.994a14.513 14.513 0 00-.552-3.963l-.006-.022a13.959 13.959 0 00-3.137-5.702q-.479-.516-1.006-1.003a17.67 17.67 0 00-.677-.623A18.303 18.303 0 0024.194 1a19.617 19.617 0 00-12.539 4.489 17.555 17.555 0 00-3.945 21.69C9.945 31.507 11.694 38.622 12.14 46v2"
-                stroke-miterlimit="10"
-              />
-              <path
-                d="M27.917 12L31.417 12"
-              />
-              <path
-                d="M27.917 26L31.417 26"
-              />
-              <path
-                d="M29.667 12L29.667 26"
-              />
-              <path
-                d="M23.992 26L19.904 12 19.226 12 15.159 26"
-              />
-              <path
-                d="M16.854 21.133L22.276 21.133"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row memori--settings-section__row--with-divider"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--info"
+                >
+                  <svg
+                    class="lucide lucide-info memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                    <path
+                      d="M12 16v-4"
+                    />
+                    <path
+                      d="M12 8h.01"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <p
+                    class="memori--settings-section__title"
+                  >
+                    deepThoughtDisclaimerTitle
+                  </p>
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__description"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="memori--settings-section__actions-right"
+                >
+                  <span
+                    class="styles-module__root___-ALla"
+                  >
+                    <span
+                      class="styles-module__trigger___V2aIF"
+                      id="base-ui-:rv:"
+                    >
+                      <button
+                        aria-label="deepThoughtHelper"
+                        class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="memori-button__content"
+                        >
+                          <svg
+                            class="lucide lucide-info memori--settings-section__inline-info-icon"
+                            fill="none"
+                            height="24"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle
+                              cx="12"
+                              cy="12"
+                              r="10"
+                            />
+                            <path
+                              d="M12 16v-4"
+                            />
+                            <path
+                              d="M12 8h.01"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </span>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r11:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
-        <h2>
-          deepThoughtDisclaimerTitle
-        </h2>
         <p
-          class="memori--deep-thought-disclaimer-text"
+          class="memori--start-description"
         >
-          deepThoughtDisclaimer
+          write_and_speak.pageTryMeExplanation
         </p>
       </div>
     </div>
@@ -1180,113 +2080,208 @@ exports[`renders StartPanel with existing sessionunchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
+        <div
+          class="memori--title-container__content"
+        >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
+          <div
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
+          >
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
+          </div>
+        </div>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-spin memori-spin--spinning"
           >
-            Lorem ipsum.
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
+            >
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
-      </p>
+      </div>
       <div
-        class="memori--start-privacy-explanation-container"
+        class="memori--description"
       >
-        <p
-          class="memori--start-privacy-explanation"
+        <section
+          class="memori--start-panel__mobile-info"
         >
-          write_and_speak.pagePrivacyExplanation
-        </p>
+          <div
+            class="memori--start-panel__mobile-info-content"
+          >
+            <section
+              class="memori--settings-section"
+            >
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r8:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
+          </div>
+        </section>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--start-actions"
         >
-          <div
-            class="memori-tooltip--trigger"
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="memori-button__content"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
-          </div>
+              write_and_speak.resumeButton
+            </span>
+          </button>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.resumeButton
-      </button>
-      <div
-        class="memori--completion-provider-status--loading"
-      >
-        <div
-          class="memori-spin memori-spin--spinning"
+        <p
+          class="memori--start-description"
         >
-          <div
-            class="memori-spin--spinner"
-          >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
-          </div>
-        </div>
+          write_and_speak.pageTryMeExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -1300,113 +2295,208 @@ exports[`renders StartPanel with integrationConfig unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
       <div
-        class="memori--completion-provider-status--loading"
+        class="memori--description"
       >
-        <div
-          class="memori-spin memori-spin--spinning"
+        <section
+          class="memori--start-panel__mobile-info"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori--start-panel__mobile-info-content"
           >
-            <svg
-              aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r2b:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -1420,48 +2510,122 @@ exports[`renders StartPanel with login required unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--needsLogin"
+      class="memori--start-panel__body"
     >
-      <p>
-        write_and_speak.requirePositionHelp
-      </p>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-button--with-icon memori--start-button"
+      <div
+        class="memori--title-container"
       >
-        <span
-          class="memori-button--icon"
+        <picture
+          class="memori--avatar"
         >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
+        <div
+          class="memori--title-container__content"
+        >
+          <h2
+            class="memori--title"
           >
-            <path
-              d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-            />
-          </svg>
-        </span>
-        login.login
-      </button>
+            Memori
+          </h2>
+          <div
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
+          >
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
+          </div>
+        </div>
+        <div
+          class="memori--completion-provider-status--loading"
+        >
+          <div
+            class="memori-spin memori-spin--spinning"
+          >
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
+            >
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="memori--needsLogin"
+      >
+        <p>
+          write_and_speak.requirePositionHelp
+        </p>
+        <button
+          class="memori-button memori-button--primary memori-button--md"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="memori-button__icon"
+          >
+            <svg
+              class="lucide lucide-user"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+              />
+              <circle
+                cx="12"
+                cy="7"
+                r="4"
+              />
+            </svg>
+          </span>
+          <span
+            class="memori-button__content"
+          >
+            login.login
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -1475,299 +2639,269 @@ exports[`renders StartPanel with multilangual unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--description"
+      class="memori--start-panel__body"
     >
-      <p>
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
         <div
-          class="memori-expandable memori--description-text"
+          class="memori--title-container__content"
         >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
           <div
-            class="memori-expandable--inner"
-            style="max-height: 9999px;"
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
           >
-            Lorem ipsum.
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
           </div>
         </div>
-      </p>
-      <div
-        class="memori--language-chooser"
-      >
-        <label
-          for="user-lang-pref"
-          id="user-lang-pref-label"
-        >
-          write_and_speak.iWantToTalkToIn
-        </label>
-        <select
-          aria-labelledby="user-lang-pref-label"
-          class="memori-select--button"
-          id="user-lang-pref"
-        >
-          <optgroup
-            label="popularLanguages"
-          >
-            <option
-              aria-label="English"
-              value="EN"
-            >
-              English
-            </option>
-            <option
-              aria-label="Italiano"
-              value="IT"
-            >
-              Italiano
-            </option>
-          </optgroup>
-          <optgroup
-            label="allLanguages"
-          >
-            <option
-              aria-label="العربية"
-              value="AR"
-            >
-              العربية
-            </option>
-            <option
-              aria-label="български"
-              value="BG"
-            >
-              български
-            </option>
-            <option
-              aria-label="Čeština / český jazyk"
-              value="CS"
-            >
-              Čeština / český jazyk
-            </option>
-            <option
-              aria-label="Dansk"
-              value="DA"
-            >
-              Dansk
-            </option>
-            <option
-              aria-label="Deutsch"
-              value="DE"
-            >
-              Deutsch
-            </option>
-            <option
-              aria-label="Ελληνικά"
-              value="EL"
-            >
-              Ελληνικά
-            </option>
-            <option
-              aria-label="Español"
-              value="ES"
-            >
-              Español
-            </option>
-            <option
-              aria-label="Eesti keel"
-              value="ET"
-            >
-              Eesti keel
-            </option>
-            <option
-              aria-label="Suomi"
-              value="FI"
-            >
-              Suomi
-            </option>
-            <option
-              aria-label="Français"
-              value="FR"
-            >
-              Français
-            </option>
-            <option
-              aria-label="Hrvatski"
-              value="HR"
-            >
-              Hrvatski
-            </option>
-            <option
-              aria-label="Magyar"
-              value="HU"
-            >
-              Magyar
-            </option>
-            <option
-              aria-label="日本語"
-              value="JA"
-            >
-              日本語
-            </option>
-            <option
-              aria-label="Lietuvių kalba"
-              value="LT"
-            >
-              Lietuvių kalba
-            </option>
-            <option
-              aria-label="Latvian"
-              value="LV"
-            >
-              Latvian
-            </option>
-            <option
-              aria-label="Nederlands"
-              value="NL"
-            >
-              Nederlands
-            </option>
-            <option
-              aria-label="Polski"
-              value="PL"
-            >
-              Polski
-            </option>
-            <option
-              aria-label="Português"
-              value="PT"
-            >
-              Português
-            </option>
-            <option
-              aria-label="Română"
-              value="RO"
-            >
-              Română
-            </option>
-            <option
-              aria-label="Русский"
-              value="RU"
-            >
-              Русский
-            </option>
-            <option
-              aria-label="Slovenčina"
-              value="SK"
-            >
-              Slovenčina
-            </option>
-            <option
-              aria-label="Slovenščina"
-              value="SL"
-            >
-              Slovenščina
-            </option>
-            <option
-              aria-label="Svenska"
-              value="SV"
-            >
-              Svenska
-            </option>
-            <option
-              aria-label="Українська"
-              value="UK"
-            >
-              Українська
-            </option>
-            <option
-              aria-label="中文"
-              value="ZH"
-            >
-              中文
-            </option>
-          </optgroup>
-        </select>
-      </div>
-      <div
-        class="memori--start-privacy-explanation-container"
-      >
-        <p
-          class="memori--start-privacy-explanation"
-        >
-          write_and_speak.pagePrivacyExplanation
-        </p>
         <div
-          class="memori-tooltip memori-tooltip--align-topLeft"
+          class="memori--completion-provider-status--loading"
         >
           <div
-            class="memori-tooltip--trigger"
+            class="memori-spin memori-spin--spinning"
           >
-            <svg
-              aria-hidden="true"
-              class="memori--start-privacy-explanation-icon"
-              fill="none"
-              focusable="false"
-              role="img"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
             >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-              />
-              <path
-                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
-              />
-              <path
-                d="M12 17L12.01 17"
-              />
-            </svg>
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
-      >
-        write_and_speak.tryMeButton
-      </button>
       <div
-        class="memori--completion-provider-status--loading"
+        class="memori--description"
       >
         <div
-          class="memori-spin memori-spin--spinning"
+          class="memori--language-row"
         >
           <div
-            class="memori-spin--spinner"
+            class="memori-combobox memori-combobox--language-chooser memori--language-row__combobox"
           >
-            <svg
+            <label
+              class="memori-combobox__label"
+              for=":r2h:"
+              id=":r2h:-label"
+            >
+              write_and_speak.chatLanguageLabel
+            </label>
+            <button
+              aria-expanded="false"
+              aria-haspopup="dialog"
+              aria-labelledby=":r2h:-label"
+              class="memori-combobox__trigger"
+              id=":r2h:"
+              role="combobox"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="memori-combobox__value"
+              >
+                English
+              </span>
+              <span
+                aria-hidden="true"
+                class="memori-combobox__trigger-icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-chevron-down"
+                  fill="none"
+                  height="16"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m6 9 6 6 6-6"
+                  />
+                </svg>
+              </span>
+            </button>
+            <input
               aria-hidden="true"
-              class="memori-loading-icon"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
+              id="base-ui-:r2i:"
+              name="user-lang-pref"
+              style="overflow: hidden; white-space: nowrap; position: fixed; top: 0px; left: 0px; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px;"
+              tabindex="-1"
+              value="EN"
+            />
+          </div>
+        </div>
+        <section
+          class="memori--start-panel__mobile-info"
+        >
+          <div
+            class="memori--start-panel__mobile-info-content"
+          >
+            <section
+              class="memori--settings-section"
             >
-              <path
-                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-              />
-            </svg>
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="styles-module__root___-ALla"
+                >
+                  <span
+                    class="styles-module__trigger___V2aIF"
+                    id="base-ui-:r2l:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
           </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori--start-actions__start"
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
         </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
       </div>
-      <p
-        class="memori--start-description"
-      >
-        write_and_speak.pageTryMeExplanation
-      </p>
     </div>
   </div>
 </div>
@@ -1781,49 +2915,171 @@ exports[`renders StartPanel with position required unchanged 1`] = `
     <div
       class="memori--cover"
     />
-    <picture
-      class="memori--avatar"
-    >
-      <source
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-      <img
-        alt="Memori"
-        src="https://aisuru.com/images/aisuru/square_logo.png"
-      />
-    </picture>
-    <h2
-      class="memori--title"
-    >
-      Memori
-    </h2>
     <div
-      class="memori--needsPosition"
+      class="memori--start-panel__body"
     >
-      <p>
-        write_and_speak.requirePositionHelp
-      </p>
-      <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-button--with-icon memori--start-button"
+      <div
+        class="memori--title-container"
       >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 384 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        widget.position
-      </button>
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
+        <div
+          class="memori--title-container__content"
+        >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
+          <div
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
+          >
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
+          </div>
+        </div>
+        <div
+          class="memori--completion-provider-status--loading"
+        >
+          <div
+            class="memori-spin memori-spin--spinning"
+          >
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
+            >
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="memori--needsPosition"
+      >
+        <p>
+          write_and_speak.requirePositionHelp
+        </p>
+        <div
+          class="memori--needsPosition-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--md"
+            style="width: 100%;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-map-pin"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+                />
+                <circle
+                  cx="12"
+                  cy="10"
+                  r="3"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.useMyPosition
+            </span>
+          </button>
+          <button
+            class="memori-button memori-button--outline memori-button--md"
+            style="width: 100%;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-map-pin-off"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.75 7.09a3 3 0 0 1 2.16 2.16"
+                />
+                <path
+                  d="M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568"
+                />
+                <path
+                  d="m2 2 20 20"
+                />
+                <path
+                  d="M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533"
+                />
+                <path
+                  d="M9.13 9.13a3 3 0 0 0 3.74 3.74"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.dontWantToProvidePosition
+            </span>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </div>