File size: 2,393 Bytes
09801ca
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/* Mobile Responsive Fixes for AnalystChat */

/* Mobile responsive breakpoints */
@media (max-width: 768px) {
  /* Sidebar - Hidden by default on mobile */
  .chat-sidebar {
    position: fixed;
    left: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    z-index: 50;
    transition: left 0.3s ease;
  }
  
  .chat-sidebar.open {
    left: 0;
  }
  
  /* Chat container - Full width on mobile */
  .chat-container {
    width: 100%;
    padding: 0;
  }
  
  /* Input area - Fixed at bottom on mobile */
  .chat-input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: inherit;
    border-top: 1px solid var(--border-color);
    z-index: 40;
  }
  
  /* Messages - Add bottom padding for fixed input */
  .messages-container {
    padding-bottom: 100px;
  }
  
  /* Mode dropdown - Full width on mobile */
  .mode-dropdown {
    width: 100%;
  }
  
  /* Touch-friendly buttons */
  .touch-button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Hamburger menu button */
  .mobile-menu-btn {
    display: flex;
    padding: 12px;
  }
  
  /* Hide desktop-only elements */
  .desktop-only {
    display: none;
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .chat-sidebar {
    width: 280px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .mobile-menu-btn {
    display: none;
  }
  
  .mobile-only {
    display: none;
  }
}

/* Better loading states */
.loading-skeleton {
  background: linear-gradient(90deg, 
    var(--skeleton-base) 25%, 
    var(--skeleton-highlight) 50%, 
    var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Streaming text cursor animation */
.streaming-cursor::after {
  content: '▊';
  animation: blink 1s step-end infinite;
  color: var(--primary);
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Error state styling */
.error-message {
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}

/* Touch-friendly scrollbars on mobile */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
  }
}