implement more usability features

public/style.css

@@ -811,6 +811,7 @@ select:focus {
     gap: 16px;
     min-height: 0;
     overflow: hidden;
+    position: relative;
 }
 
 .chat-layout-focus {
@@ -831,6 +832,68 @@ select:focus {
     min-height: 58vh;
 }
 
+.chat-activity-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: grid;
+    place-items: center;
+    padding: 28px;
+    background:
+        linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86));
+    backdrop-filter: blur(10px);
+}
+
+.chat-activity-card {
+    width: min(440px, 100%);
+    padding: 28px;
+    border-radius: 26px;
+    border: 1px solid rgba(24, 32, 31, 0.1);
+    background:
+        linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94));
+    box-shadow: 0 24px 70px rgba(56, 39, 21, 0.16);
+    text-align: center;
+}
+
+.chat-activity-card h3 {
+    margin-top: 10px;
+    font-size: clamp(1.4rem, 2vw, 1.8rem);
+}
+
+.chat-activity-card .subtitle {
+    margin-top: 12px;
+}
+
+.chat-activity-mark {
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 8px;
+    min-height: 34px;
+    margin-bottom: 10px;
+}
+
+.chat-activity-mark span {
+    width: 8px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, var(--brand), var(--brand-strong));
+    animation: loadingWave 1.1s ease-in-out infinite;
+}
+
+.chat-activity-mark span:nth-child(1) {
+    height: 14px;
+}
+
+.chat-activity-mark span:nth-child(2) {
+    height: 28px;
+    animation-delay: 0.12s;
+}
+
+.chat-activity-mark span:nth-child(3) {
+    height: 18px;
+    animation-delay: 0.24s;
+}
+
 .input-shell-focus {
     border-top: 1px solid rgba(24, 32, 31, 0.07);
 }