/ app / src / components / InputField.css
InputField.css
  1  .input-field-container {
  2    position: relative;
  3    width: 100%;
  4    background: #1a1a1a;
  5    border-top: 2px solid #333;
  6  }
  7  
  8  .input-field {
  9    display: flex;
 10    align-items: center;
 11    gap: 0.75rem;
 12    padding: 1rem;
 13    background: #1a1a1a;
 14  }
 15  
 16  .input-flame {
 17    font-size: 1.5rem;
 18    animation: flameFlicker 0.5s ease-in-out infinite;
 19  }
 20  
 21  @keyframes flameFlicker {
 22    0%, 100% {
 23      opacity: 1;
 24      transform: scale(1);
 25    }
 26    50% {
 27      opacity: 0.8;
 28      transform: scale(1.1);
 29    }
 30  }
 31  
 32  .input-textarea {
 33    flex: 1;
 34    background: #0f0f0f;
 35    border: 1px solid #ff6b35;
 36    border-radius: 8px;
 37    padding: 0.75rem;
 38    color: #f1f5f9;
 39    font-size: 1rem;
 40    font-family: inherit;
 41    resize: none;
 42    outline: none;
 43    transition: border-color 0.2s;
 44    min-height: 40px;
 45    max-height: 120px;
 46  }
 47  
 48  .input-textarea:focus {
 49    border-color: #ff4500;
 50    box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
 51  }
 52  
 53  .input-textarea:disabled {
 54    opacity: 0.6;
 55    cursor: not-allowed;
 56  }
 57  
 58  .input-textarea::placeholder {
 59    color: #64748b;
 60  }
 61  
 62  .flame-row {
 63    text-align: center;
 64    padding: 0.5rem;
 65    font-size: 1.2rem;
 66    background: linear-gradient(
 67      to bottom,
 68      #1a1a1a 0%,
 69      transparent 100%
 70    );
 71  }
 72  
 73  .autocomplete-dropdown {
 74    position: absolute;
 75    bottom: 100%;
 76    left: 1rem;
 77    right: 1rem;
 78    margin-bottom: 0.5rem;
 79    background: #0f0f0f;
 80    border: 2px solid #4A90E2;
 81    border-radius: 8px;
 82    overflow: hidden;
 83    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
 84    z-index: 1000;
 85  }
 86  
 87  .autocomplete-item {
 88    display: flex;
 89    align-items: center;
 90    gap: 0.75rem;
 91    padding: 0.75rem 1rem;
 92    cursor: pointer;
 93    transition: background 0.2s;
 94    border-bottom: 1px solid #2a2a2a;
 95  }
 96  
 97  .autocomplete-item:last-child {
 98    border-bottom: none;
 99  }
100  
101  .autocomplete-item:hover {
102    background: #1a1a1a;
103  }
104  
105  .autocomplete-icon {
106    font-size: 1.2rem;
107  }
108  
109  .autocomplete-name {
110    flex: 1;
111    color: #f1f5f9;
112    font-weight: 500;
113  }
114  
115  .autocomplete-level {
116    font-size: 0.75rem;
117    font-weight: bold;
118  }