android-midscene-automation 0.2.3 → 1.1.0

package/artemis-main/apps/showcase_ui/src/app/components/chat-interface/chat-interface.component.scss

@@ -0,0 +1,1171 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$border-color: rgba(0, 0, 0, 0.08);
+$text-primary: #1f1f1f;
+$text-secondary: #71717a;
+$text-muted: #a1a1aa;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.chat-interface-container {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #ffffff;
+  box-sizing: border-box;
+
+  .chat-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    height: 60px;
+    padding: 0 20px;
+    border-bottom: 1px solid $border-color;
+    background: #ffffff;
+    box-sizing: border-box;
+
+    .tab-selector-bar {
+      display: flex;
+      height: 36px;
+      box-sizing: border-box;
+      background: rgba(241, 245, 249, 0.72);
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
+      border: 1px solid rgba(226, 232, 240, 0.85);
+      border-radius: 18px;
+      padding: 3px;
+      gap: 3px;
+      align-items: center;
+      flex-shrink: 0;
+      box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.8);
+
+      .tab-selector-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        height: 30px;
+        padding: 0 14px;
+        box-sizing: border-box;
+        border: none;
+        background: transparent;
+        border-radius: 15px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #64748b;
+        cursor: pointer;
+        line-height: 1;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        white-space: nowrap;
+
+        .tab-icon {
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        &:hover:not(.active) {
+          color: #0f172a;
+          background: rgba(255, 255, 255, 0.7);
+        }
+
+        &.active {
+          background: #ffffff;
+          color: #2563eb;
+          font-weight: 700;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);
+        }
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex: 1 1 0;
+      min-width: max-content;
+      flex-shrink: 0;
+
+      .btn-resume-task {
+        padding: 6px 14px;
+        background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(26, 115, 232, 0.85));
+        backdrop-filter: blur(14px) saturate(180%);
+        -webkit-backdrop-filter: blur(14px) saturate(180%);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        border-radius: 16px;
+        font-size: 13.5px;
+        font-weight: 600;
+        color: #ffffff;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        margin-right: 8px;
+        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.45);
+
+        .material-symbols-outlined {
+          font-size: 16px;
+          color: inherit;
+        }
+
+        &:hover {
+          background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(26, 115, 232, 0.95));
+          border-color: rgba(255, 255, 255, 0.6);
+          box-shadow: 0 6px 18px rgba(37, 99, 235, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.6);
+          transform: translateY(-0.5px);
+        }
+
+        &:active {
+          transform: scale(0.97);
+        }
+      }
+
+      .btn-clear-history {
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        box-sizing: border-box;
+        background: rgba(255, 255, 255, 0.72);
+        backdrop-filter: blur(16px) saturate(180%);
+        -webkit-backdrop-filter: blur(16px) saturate(180%);
+        border: 1px solid rgba(203, 213, 225, 0.85);
+        border-radius: 50%;
+        color: #64748b;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9);
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+        .material-symbols-outlined {
+          font-size: 16px;
+          color: inherit;
+        }
+
+        &:hover:not(:disabled) {
+          background: #fef2f2;
+          color: #ef4444;
+          border-color: #fca5a5;
+          box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
+          transform: scale(1.05);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 12px 100px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: #ffffff;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(148, 163, 184, 0.3);
+      border-radius: 4px;
+    }
+
+    .queue-section-header {
+      font-size: 11.5px;
+      font-weight: 700;
+      color: #475569;
+      margin: 6px 0 2px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .section-icon {
+        font-size: 14px;
+        color: inherit;
+      }
+    }
+
+    .empty-section-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f1f5f9;
+      border: 1px dashed #cbd5e1;
+      border-radius: 8px;
+      padding: 12px;
+      color: #64748b;
+      font-size: 12px;
+      text-align: center;
+    }
+
+    .history-section {
+      margin-top: 12px;
+      border-top: 1px solid rgba(226, 232, 240, 0.8);
+      padding-top: 12px;
+
+      &[open] .history-summary {
+        margin-bottom: 8px;
+      }
+
+      .history-summary {
+        font-size: 11.5px;
+        font-weight: 700;
+        color: #475569;
+        cursor: pointer;
+        outline: none;
+        user-select: none;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 6px;
+        margin-left: -6px;
+        border-radius: 6px;
+        transition: background 0.2s;
+
+        .section-icon {
+          font-size: 14px;
+          color: inherit;
+        }
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &:hover {
+          background: #f1f5f9;
+          color: #1e293b;
+        }
+      }
+
+      .history-list-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+
+    .task-card {
+      background: #ffffff;
+      border: 1px solid rgba(226, 232, 240, 0.8);
+      border-radius: 10px;
+      padding: 10px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
+
+      &:hover {
+        transform: translateY(-1px);
+        border-color: rgba(203, 213, 225, 1);
+        box-shadow: 0 3px 8px rgba(148, 163, 184, 0.08);
+
+        .task-card-header .task-card-header-actions {
+          &:has(.btn-delete-card) .task-time,
+          &:has(.btn-delete-card) .task-time-divider,
+          &:has(.btn-stop-card) .task-time,
+          &:has(.btn-stop-card) .task-time-divider {
+            opacity: 0;
+          }
+
+          .btn-delete-card,
+          .btn-stop-card {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+
+      &.selected {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 1px #3b82f6, 0 4px 12px rgba(59, 130, 246, 0.08);
+        background: #ffffff;
+      }
+
+      &.running {
+        border-color: #10b981;
+        box-shadow: 0 0 0 1px #10b981, 0 4px 12px rgba(16, 185, 129, 0.08);
+
+        &.selected {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 1px #3b82f6, 0 4px 12px rgba(59, 130, 246, 0.08);
+        }
+      }
+
+      .task-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+
+        .task-badge {
+          flex-shrink: 0;
+          display: inline-flex;
+          align-items: center;
+          font-size: 10.5px;
+          font-weight: 700;
+          padding: 2px 5px;
+          border-radius: 4px;
+          letter-spacing: 0.05em;
+          border: 1px solid #e2e8f0;
+          background: #fafafa;
+          color: #64748b;
+
+          &::before {
+            content: '';
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 4px;
+          }
+
+          &.running {
+            background: #fafafa;
+            color: #1f1f1f;
+            border-color: #1f1f1f;
+            &::before {
+              background-color: #1f1f1f;
+              animation: pulse-black-dot-small 1.5s infinite ease-in-out;
+            }
+          }
+          &.paused {
+            background: #fff7ed;
+            color: #c2410c;
+            border-color: #fdba74;
+            &::before { background-color: #f97316; }
+          }
+          &.completed {
+            background: #fafafa;
+            color: #1f1f1f;
+            border-color: #e2e8f0;
+            &::before {
+              background-color: #1f1f1f;
+            }
+          }
+          &.pending {
+            background: #fafafa;
+            color: #64748b;
+            border-color: #e2e8f0;
+            &::before {
+              background-color: #94a3b8;
+            }
+          }
+          &.failed {
+            background: #fafafa;
+            color: #ef4444;
+            border-color: #fee2e2;
+            &::before {
+              background-color: #ef4444;
+            }
+          }
+          &.cancelled {
+            background: #fafafa;
+            color: #d97706;
+            border-color: #fef3c7;
+            &::before {
+              background-color: #f59e0b;
+            }
+          }
+
+          .status-dot {
+            display: none;
+          }
+        }
+
+        .task-card-header-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          position: relative;
+          min-width: 0;
+          flex-shrink: 1;
+          justify-content: flex-end;
+
+          .task-device {
+            display: inline-flex;
+            align-items: center;
+            gap: 2.5px;
+            min-width: 0;
+            flex-shrink: 1;
+            font-size: 11px;
+            color: #94a3b8;
+            line-height: 1;
+            cursor: default;
+            transition: color 0.15s ease, opacity 0.15s ease;
+
+            .device-icon {
+              font-size: 12.5px;
+              width: 12.5px;
+              height: 12.5px;
+              line-height: 12.5px;
+              color: #94a3b8;
+              opacity: 0.75;
+              flex-shrink: 0;
+            }
+
+            .device-name {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              min-width: 0;
+              font-family: inherit;
+              letter-spacing: -0.15px;
+            }
+
+            &:hover {
+              color: #64748b;
+              .device-icon {
+                color: #64748b;
+                opacity: 1;
+              }
+            }
+          }
+
+          .task-time-divider {
+            font-size: 10px;
+            color: #cbd5e1;
+            line-height: 1;
+            user-select: none;
+            flex-shrink: 0;
+            transition: opacity 0.15s ease;
+          }
+
+          .task-time {
+            font-size: 11.5px;
+            color: #94a3b8;
+            white-space: nowrap;
+            flex-shrink: 0;
+            line-height: 1;
+            transition: opacity 0.15s ease;
+          }
+
+          .btn-delete-card {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            padding: 0;
+            border: none;
+            background: transparent;
+            border-radius: 4px;
+            color: #94a3b8;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.15s ease;
+
+            .material-symbols-outlined {
+              font-size: 14px;
+              line-height: 1;
+            }
+
+            &:hover:not(:disabled) {
+              color: #ef4444;
+              background: #fee2e2;
+            }
+
+            &:disabled {
+              opacity: 0.3;
+              cursor: not-allowed;
+            }
+          }
+
+          .btn-stop-card {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            padding: 0;
+            border: none;
+            background: transparent;
+            border-radius: 4px;
+            color: #ef4444;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.15s ease;
+
+            .material-symbols-outlined {
+              font-size: 15px;
+              line-height: 1;
+            }
+
+            &:hover:not(:disabled) {
+              color: #dc2626;
+              background: #fee2e2;
+              transform: translateY(-50%) scale(1.1);
+            }
+
+            &:disabled {
+              opacity: 0.3;
+              cursor: not-allowed;
+            }
+          }
+        }
+      }
+
+      .task-goal {
+        font-size: 12.5px;
+        font-weight: 500;
+        color: #1e293b;
+        line-height: 1.4;
+        word-break: break-word;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .task-card-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        border-top: 1px solid rgba(241, 245, 249, 0.8);
+        padding-top: 6px;
+        font-size: 11.5px;
+        color: #94a3b8;
+
+        .task-id {
+          font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
+          font-size: 11px;
+          color: #94a3b8;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          min-width: 0;
+          flex: 1;
+          transition: color 0.15s ease;
+
+          &:hover {
+            color: #475569;
+          }
+        }
+
+        .task-date {
+          flex-shrink: 0;
+          font-size: 11px;
+          color: #94a3b8;
+        }
+      }
+    }
+  }
+
+
+
+
+  // Notes tab content
+  .notes-tab-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+
+    .notes-selector-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .selector-title {
+        font-size: 11px;
+        font-weight: 700;
+        color: #94a3b8;
+        letter-spacing: 0.05em;
+      }
+
+      .notes-selector-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .note-selector-pill {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 12px;
+          border: 1px solid #e2e8f0;
+          background: #ffffff;
+          border-radius: 20px;
+          font-size: 13px;
+          font-weight: 500;
+          color: #475569;
+          cursor: pointer;
+          transition: all 0.15s ease;
+
+          .pill-icon {
+            font-size: 15px;
+          }
+
+          &:hover {
+            background: #f8fafc;
+            border-color: #cbd5e1;
+            color: #1e293b;
+          }
+
+          &.active {
+            background: #eff6ff;
+            border-color: #bfdbfe;
+            color: #1d4ed8;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    .empty-notes-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+      margin: auto 0;
+      text-align: center;
+      user-select: none;
+      animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      .empty-notes-icon {
+        width: 52px;
+        height: 52px;
+        border-radius: 50%;
+        background: #f1f5f9;
+        border: 1px solid #e2e8f0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 14px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+
+        .material-symbols-outlined {
+          font-size: 26px;
+          color: #94a3b8;
+        }
+      }
+
+      .empty-notes-title {
+        font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        color: #1e293b;
+        margin: 0 0 6px 0;
+      }
+
+      .empty-notes-subtitle {
+        font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 12.5px;
+        color: #64748b;
+        line-height: 1.5;
+        max-width: 240px;
+        margin: 0;
+      }
+    }
+
+    .note-viewer-cards {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding: 16px 8px;
+      overflow-y: auto;
+
+      .note-title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #1f1f1f;
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
+      }
+
+      .code-segment {
+        font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
+        background-color: #f1f3f4;
+        color: #1967d2;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 14px;
+        margin: 0 2px;
+        word-break: break-all;
+        font-weight: normal;
+      }
+
+      .checked {
+        .code-segment {
+          color: #a1a1aa;
+          background-color: #f8f9fa;
+        }
+      }
+
+      .milestones-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        margin-bottom: 24px;
+      }
+
+      .milestone-block {
+        display: flex;
+        flex-direction: column;
+
+        &.checked {
+          .milestone-title-row {
+            .milestone-status-icon.checked {
+              opacity: 0.7;
+            }
+            .milestone-text {
+              color: #a1a1aa;
+            }
+          }
+        }
+
+        .milestone-title-row {
+          display: flex;
+          align-items: flex-start;
+          gap: 10px;
+
+          .milestone-status-icon {
+            font-size: 20px;
+            user-select: none;
+            margin-top: 3px;
+            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+
+            &.checked {
+              color: #1a73e8;
+            }
+
+            &.progress {
+              color: #1a73e8;
+            }
+
+            &.unchecked {
+              color: #cbd5e1;
+            }
+          }
+
+          .milestone-text {
+            font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
+            color: #1f1f1f;
+            font-size: 14px;
+            line-height: 1.8;
+            font-weight: 400;
+            word-break: break-word;
+            flex: 1;
+
+            span {
+              color: inherit;
+            }
+
+            .bold-segment {
+              font-weight: inherit;
+              color: inherit;
+            }
+          }
+        }
+
+        .milestone-substeps {
+          margin-top: 8px;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          padding-left: 28px;
+
+          .substep-row {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
+            color: #1f1f1f;
+            font-size: 14px;
+            line-height: 1.8;
+
+            span {
+              color: inherit;
+            }
+
+            &.checked {
+              color: #a1a1aa;
+
+              .check-icon.checked {
+                opacity: 0.7;
+              }
+            }
+
+            .check-icon {
+              font-size: 20px;
+              user-select: none;
+              margin-top: 3px;
+              font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+
+              &.checked {
+                color: #1a73e8;
+              }
+
+              &.progress {
+                color: #1a73e8;
+              }
+
+              &.unchecked {
+                color: #cbd5e1;
+              }
+            }
+
+            .bullet {
+              color: #9ca3af;
+              font-weight: bold;
+              user-select: none;
+              padding-left: 2px;
+            }
+
+            .line-text {
+              word-break: break-word;
+              color: inherit;
+
+              span {
+                color: inherit;
+              }
+
+              .bold-segment {
+                font-weight: inherit;
+                color: inherit;
+              }
+            }
+          }
+        }
+
+        .milestone-checks-container {
+          margin-top: 8px;
+          padding-left: 28px;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+      }
+
+      .verification-card {
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 6px;
+        padding: 8px 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        &.standalone {
+          margin-top: 8px;
+          margin-bottom: 8px;
+        }
+
+        .card-header {
+          display: flex;
+          align-items: center;
+
+          .card-tag {
+            font-family: 'Google Sans Text', 'Inter', -apple-system, sans-serif;
+            font-size: 10.5px;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.6px;
+            text-transform: uppercase;
+            color: #64748b;
+
+            &.assert {
+              color: #0284c7;
+            }
+          }
+        }
+
+        .card-body {
+          font-family: inherit;
+          font-size: 13.5px;
+          line-height: 1.6;
+          color: #334155;
+          word-break: break-word;
+
+          .bold-segment {
+            font-weight: 600;
+            color: #1e293b;
+          }
+
+          .code-segment {
+            font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
+            font-size: 12px;
+            background: #f1f5f9;
+            color: #0f172a;
+            padding: 1.5px 6px;
+            border-radius: 4px;
+            border: 1px solid #e2e8f0;
+          }
+        }
+
+        &.finding {
+          background: #fffbeb;
+          border-color: #fef3c7;
+
+          .card-header .card-tag {
+            color: #b45309;
+          }
+
+          .card-body {
+            color: #92400e;
+          }
+        }
+      }
+
+      .other-lines-container {
+        display: flex;
+        flex-direction: column;
+        padding: 8px 4px;
+
+        .md-line {
+          display: flex;
+          align-items: flex-start;
+          gap: 10px;
+          margin-bottom: 14px;
+          min-height: 22px;
+          font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
+          color: #1f1f1f;
+          font-size: 14px;
+          line-height: 1.6;
+
+          &.empty {
+            height: 12px;
+          }
+
+          &.h1 {
+            font-size: 14px;
+            font-weight: 700;
+            margin-top: 24px;
+            margin-bottom: 12px;
+            border-bottom: 1px solid #e5e7eb;
+            padding-bottom: 6px;
+          }
+
+          &.h2 {
+            font-size: 14px;
+            font-weight: 700;
+            margin-top: 20px;
+            margin-bottom: 10px;
+          }
+
+          &.h3 {
+            font-size: 14px;
+            font-weight: 700;
+            margin-top: 14px;
+            margin-bottom: 8px;
+          }
+
+          &.checked {
+            color: #a1a1aa;
+
+            .check-icon {
+              color: #1a73e8;
+              opacity: 0.7;
+            }
+          }
+
+          &.progress {
+            .check-icon {
+              color: #1a73e8;
+            }
+          }
+
+          &.unchecked {
+            .check-icon {
+              color: #cbd5e1;
+            }
+          }
+
+          &.list-item {
+            .bullet {
+              color: #9ca3af;
+              font-weight: bold;
+              user-select: none;
+            }
+          }
+
+          span {
+            color: inherit;
+          }
+
+          .check-icon {
+            font-size: 20px;
+            user-select: none;
+            margin-top: 1px;
+            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+          }
+
+          .line-text {
+            word-break: break-word;
+            color: inherit;
+
+            span {
+              color: inherit;
+            }
+
+            .bold-segment {
+              font-weight: inherit;
+              color: inherit;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0% { transform: scale(0.85); opacity: 0.6; }
+  50% { transform: scale(1.15); opacity: 1; }
+  100% { transform: scale(0.85); opacity: 0.6; }
+}
+
+@keyframes bannerSlideIn {
+  from { transform: translateY(5px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse-black-dot-small {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+@keyframes pulse-blue-dot {
+  0% {
+    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
+  }
+}
+
+@container (max-width: 380px) {
+  .chat-header {
+    padding: 0 8px;
+    gap: 6px;
+    height: 36px;
+
+    .header-left {
+      display: none;
+    }
+
+    .tab-selector-bar {
+      padding: 2px;
+      gap: 1px;
+
+      .tab-selector-btn {
+        padding: 5px 8px;
+        font-size: 12px;
+        gap: 4px;
+
+        .tab-icon {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .header-right {
+      .btn-clear-history {
+        height: 24px;
+        width: 30px;
+        padding: 0;
+        font-size: 12px;
+        gap: 0;
+        border-radius: 16px;
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .material-symbols-outlined {
+          font-size: 14px;
+          line-height: 1;
+        }
+
+        .btn-text {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: 340px) {
+  .chat-header {
+    .tab-selector-bar {
+      .tab-selector-btn {
+        padding: 5px 6px;
+        .tab-text {
+          display: none;
+        }
+      }
+    }
+
+    .header-right {
+      .btn-clear-history {
+        width: 26px;
+      }
+    }
+  }
+}