1  .chat-panel {
  2    flex: 1;
  3    display: flex;
  4    flex-direction: column;
  5    overflow: hidden;
  6    background: #1a1a1a;
  7  }
  8  
  9  .chat-messages {
 10    flex: 1;
 11    overflow-y: auto;
 12    padding: 1.5rem;
 13    scroll-behavior: smooth;
 14  }
 15  
 16  .chat-messages::-webkit-scrollbar {
 17    width: 8px;
 18  }
 19  
 20  .chat-messages::-webkit-scrollbar-track {
 21    background: #2a2a2a;
 22  }
 23  
 24  .chat-messages::-webkit-scrollbar-thumb {
 25    background: #ff6b35;
 26    border-radius: 4px;
 27  }
 28  
 29  .kamaji-ascii {
 30    color: #ff6b35;
 31    font-size: 0.8rem;
 32    line-height: 1.2;
 33    margin-bottom: 2rem;
 34    text-align: center;
 35    font-family: monospace;
 36  }
 37  
 38  .welcome-message {
 39    text-align: center;
 40    padding: 2rem;
 41    color: #f1f5f9;
 42  }
 43  
 44  .welcome-message h2 {
 45    color: #ff6b35;
 46    margin-bottom: 1rem;
 47    font-size: 1.5rem;
 48  }
 49  
 50  .welcome-message p {
 51    margin: 0.75rem 0;
 52    color: #94a3b8;
 53  }
 54  
 55  .message {
 56    margin-bottom: 1.5rem;
 57    animation: fadeIn 0.3s ease-in;
 58  }
 59  
 60  @keyframes fadeIn {
 61    from {
 62      opacity: 0;
 63      transform: translateY(10px);
 64    }
 65    to {
 66      opacity: 1;
 67      transform: translateY(0);
 68    }
 69  }
 70  
 71  .message-header {
 72    display: flex;
 73    align-items: center;
 74    gap: 0.5rem;
 75    margin-bottom: 0.5rem;
 76  }
 77  
 78  .message-icon {
 79    font-size: 1.2rem;
 80  }
 81  
 82  .message-agent {
 83    font-weight: bold;
 84    font-size: 1rem;
 85  }
 86  
 87  .message-timestamp {
 88    font-size: 0.75rem;
 89    color: #64748b;
 90    margin-left: auto;
 91  }
 92  
 93  .message-content {
 94    padding-left: 1.7rem;
 95    line-height: 1.6;
 96    white-space: pre-wrap;
 97    word-wrap: break-word;
 98  }
 99  
100  .message-user .message-agent {
101    color: #00FFFF;
102  }
103  
104  .message-system .message-agent {
105    color: #808080;
106    font-style: italic;
107  }
108  
109  .message-system .message-content {
110    color: #888;
111    font-style: italic;
112  }
113  
114  .gradient-text {
115    background: linear-gradient(
116      90deg,
117      #9B59B6,
118      #3498DB,
119      #1ABC9C,
120      #2ECC71,
121      #F1C40F,
122      #E67E22,
123      #E74C3C
124    );
125    background-size: 200% auto;
126    -webkit-background-clip: text;
127    -webkit-text-fill-color: transparent;
128    background-clip: text;
129    animation: gradientShift 3s ease infinite;
130  }
131  
132  @keyframes gradientShift {
133    0%, 100% {
134      background-position: 0% center;
135    }
136    50% {
137      background-position: 100% center;
138    }
139  }
140  
141  .loading-indicator {
142    display: flex;
143    justify-content: center;
144    padding: 1rem;
145  }
146  
147  .thinking-spinner {
148    display: flex;
149    align-items: center;
150    gap: 0.5rem;
151    color: #ff6b35;
152    font-weight: bold;
153  }
154  
155  .flame-animation {
156    animation: flameFlicker 0.5s ease-in-out infinite;
157  }
158  
159  @keyframes flameFlicker {
160    0%, 100% {
161      opacity: 1;
162      transform: scale(1);
163    }
164    50% {
165      opacity: 0.7;
166      transform: scale(1.1);
167    }
168  }