updates on the ui changes and the ai bot implementation

src/pages/nearle/assistant/DoormileAI.css

@@ -79,7 +79,7 @@
   overflow: hidden;
   background: var(--dai-surface);
   border: 1px solid var(--dai-border);
-  border-radius: 16px;
+  border-radius: 5px;
   box-shadow: var(--dai-shadow);
   transform: translateX(calc(100% + var(--dai-inset) * 2));
   opacity: 0;
@@ -202,6 +202,9 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
+  /* Never scroll sideways. A single wide child (the create form's name row)
+     used to push the whole message area horizontally. */
+  overflow-x: hidden;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: var(--dai-border-strong) transparent;
@@ -270,7 +273,7 @@
   color: var(--dai-text);
   background: var(--dai-surface);
   border: 1px solid var(--dai-border);
-  border-radius: 12px;
+  border-radius: 5px;
   cursor: pointer;
   transition:
     background-color 140ms ease,
@@ -299,7 +302,7 @@
   flex: 0 0 auto;
   width: 26px;
   height: 26px;
-  border-radius: 8px;
+  border-radius: 5px;
   background: var(--dai-surface-hover);
   color: var(--dai-text-secondary);
 }
@@ -346,7 +349,7 @@
 .dai-link:focus-visible {
   outline: 2px solid var(--dai-accent);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: 5px;
 }
 
 /* --------------------------------------------------------------------------
@@ -376,8 +379,8 @@
   max-width: 82%;
   margin-left: auto;
   padding: 8px 12px;
-  border-radius: 14px;
-  border-bottom-right-radius: 6px;
+  border-radius: 5px;
+  border-bottom-right-radius: 5px;
   font-size: 13.5px;
   line-height: 1.45;
   color: var(--dai-accent-contrast);
@@ -436,7 +439,7 @@
 .dai-root .dai-stat {
   padding: 9px 10px;
   border: 1px solid var(--dai-border);
-  border-radius: 10px;
+  border-radius: 5px;
   background: var(--dai-surface-alt);
 }
 
@@ -530,7 +533,7 @@
 .dai-root .dai-state {
   padding: 12px;
   border: 1px solid var(--dai-border);
-  border-radius: 12px;
+  border-radius: 5px;
   background: var(--dai-surface-alt);
 }
 
@@ -552,7 +555,7 @@
   justify-content: center;
   width: 26px;
   height: 26px;
-  border-radius: 8px;
+  border-radius: 5px;
   flex: 0 0 auto;
 }
 
@@ -608,7 +611,7 @@
 
 .dai-root .dai-composer {
   border: 1px solid var(--dai-border-strong);
-  border-radius: 16px;
+  border-radius: 5px;
   background: var(--dai-surface);
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
   padding: 8px 8px 6px 12px;
@@ -693,7 +696,7 @@
   width: 32px;
   height: 32px;
   padding: 0;
-  border-radius: 9px;
+  border-radius: 5px;
   border: 1px solid transparent;
   background: transparent;
   color: #4f46e5;
@@ -774,3 +777,198 @@
     transition: none !important;
   }
 }
+
+/* --------------------------------------------------------------------------
+   Write-action confirm card
+   -------------------------------------------------------------------------- */
+.dai-root .dai-action {
+  padding: 10px 11px;
+  border: 1px solid var(--dai-border-strong);
+  border-radius: 5px;
+  background: var(--dai-surface-alt);
+}
+
+.dai-root .dai-action-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  border-radius: 5px;
+  color: #4f46e5;
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.dai-root .dai-action-summary {
+  font-size: 13px;
+  line-height: 1.35;
+  font-weight: 550;
+  color: var(--dai-text);
+}
+
+.dai-root .dai-action-note {
+  font-size: 12px;
+  color: var(--dai-text-secondary);
+}
+
+.dai-root .dai-ok {
+  color: #047857;
+}
+
+.dai-root .dai-err {
+  color: #b91c1c;
+}
+
+
+/* --------------------------------------------------------------------------
+   Overflow containment
+   --------------------------------------------------------------------------
+   Flex items default to `min-width: auto`, which means they refuse to shrink
+   below their content's intrinsic width. Two side-by-side TextInputs in the
+   create-customer form therefore pushed the message column wider than the
+   panel and produced a horizontal scrollbar. Every link in the chain from the
+   scroll region down to the field has to opt out of that.
+   -------------------------------------------------------------------------- */
+.dai-root .dai-thread,
+.dai-root .dai-msg,
+.dai-root .dai-msg-row,
+.dai-root .dai-action,
+.dai-root .dai-form {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Two fields per row that genuinely share the width. `flex-wrap` is the
+   belt-and-braces part: if a field ever can't compress far enough (a long
+   label, a narrower panel), the row drops to two lines instead of pushing the
+   panel sideways again. */
+.dai-root .dai-form-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.dai-root .dai-form-row > * {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+/* Astryx's TextInput sizes itself to content unless told otherwise. */
+.dai-root .dai-form input,
+.dai-root .dai-form-row input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.dai-root .dai-field-err {
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: #b91c1c;
+}
+
+
+/* --------------------------------------------------------------------------
+   Source footer + full lists
+   -------------------------------------------------------------------------- */
+
+/* The footer is a baseline-aligned row, not a centred one: the timestamp and
+   the Sources toggle are both small text and must sit on the same line. */
+.dai-root .dai-msg-foot {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.dai-root .dai-msg-foot .dai-msg-footer {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* A full, readable list instead of "…and 4 more". Scrolls past ~12 rows so a
+   long list can never push the panel's height around. */
+.dai-root .dai-list {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--dai-border);
+  border-radius: 5px;
+  background: var(--dai-surface-alt);
+  overflow: hidden;
+}
+
+.dai-root .dai-list-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--dai-border);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dai-text-muted);
+}
+
+.dai-root .dai-list-body {
+  max-height: 260px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.dai-root .dai-list-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 8px;
+  padding: 6px 10px;
+  font-size: 12.5px;
+  line-height: 1.4;
+  color: var(--dai-text);
+  border-top: 1px solid var(--dai-divider, rgba(15, 23, 42, 0.05));
+}
+
+.dai-root .dai-list-item:first-child {
+  border-top: none;
+}
+
+.dai-root .dai-list-index {
+  flex: 0 0 auto;
+  min-width: 18px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--dai-text-muted);
+}
+
+/* The label must not be crushed to zero width by a long value — that is what
+   made "address" render one letter per line. It sizes to its content and the
+   value takes the remaining space, wrapping onto its own full-width line when
+   there isn't enough room for both. */
+.dai-root .dai-list-label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dai-root .dai-list-meta {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: right;
+  font-size: 11.5px;
+  color: var(--dai-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+/* A value that wrapped to its own line reads better left-aligned under its
+   label than pinned to the right edge. */
+.dai-root .dai-list-item > .dai-list-meta:only-child,
+.dai-root .dai-list-meta[data-wrapped='true'] {
+  text-align: left;
+}