Spaces:
Running
Running
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f0f2f5; | |
| overflow-x: hidden; | |
| } | |
| .chat-container { | |
| width: 100%; | |
| max-width: 100%; | |
| height: 100vh; | |
| border: 1px solid #ccc; | |
| border-radius: 0; | |
| background-color: white; | |
| display: flex; | |
| flex-direction: column; | |
| box-sizing: border-box; | |
| } | |
| .chat-header { | |
| background-color: #0288d1; | |
| color: white; | |
| padding: 8px; | |
| text-align: center; | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .chat messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 5px; | |
| box-sizing: border-box; | |
| scroll-behavior: smooth; | |
| } | |
| .bot-message { | |
| background-color: #e3f2fd; | |
| padding: 8px; | |
| margin: 5px 0; | |
| border-radius: 5px; | |
| max-width: 85%; | |
| word-wrap: break-word; | |
| font-size: 12px; | |
| } | |
| .user-message { | |
| background-color: #ffebee; | |
| padding: 8px; | |
| margin: 5px 0; | |
| border-radius: 5px; | |
| max-width: 85%; | |
| margin-left: auto; | |
| text-align: right; | |
| word-wrap: break-word; | |
| font-size: 12px; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 5px; | |
| border-top: 1px solid #ccc; | |
| flex-shrink: 0; | |
| position: fixed; | |
| bottom: 0; | |
| width: 100%; | |
| background-color: white; | |
| box-sizing: border-box; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 6px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| min-height: 35px; | |
| box-sizing: border-box; | |
| } | |
| .chat-input button { | |
| padding: 6px 10px; | |
| margin-left: 5px; | |
| background-color: #ff8f00; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| min-height: 35px; | |
| min-width: 60px; | |
| } | |
| .chat-input button:active { | |
| background-color: #f57c00; | |
| } | |
| .items-grid { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| padding: 8px; | |
| margin: 5px 0; | |
| background-color: #f9f9f9; | |
| border-radius: 5px; | |
| gap: 8px; | |
| scroll-behavior: smooth; | |
| } | |
| .item-card { | |
| flex: 0 0 150px; | |
| background-color: white; | |
| border: 1px solid #ddd; | |
| border-radius: 6px; | |
| padding: 8px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .item-card:active { | |
| transform: scale(0.98); | |
| } | |
| .item-image { | |
| width: 100%; | |
| height: 100px; | |
| object-fit: cover; | |
| border-radius: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .item-content { | |
| width: 100%; | |
| } | |
| .item-name { | |
| font-size: 12px; | |
| font-weight: bold; | |
| color: #333; | |
| margin-bottom: 3px; | |
| } | |
| .item-field { | |
| font-size: 10px; | |
| margin: 2px 0; | |
| color: #555; | |
| } | |
| .item-field strong { | |
| color: #0288d1; | |
| } | |
| .item-description { | |
| font-size: 10px; | |
| margin: 5px 0; | |
| color: #555; | |
| } | |
| .button-container { | |
| display: flex; | |
| gap: 5px; | |
| margin-top: 5px; | |
| } | |
| .show-button { | |
| padding: 4px; | |
| background-color: #0288d1; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 10px; | |
| flex: 1; | |
| min-width: 40px; | |
| } | |
| .show-button:active { | |
| background-color: #0277bd; | |
| } | |
| .add-button { | |
| padding: 4px; | |
| background-color: #4caf50; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 10px; | |
| flex: 1; | |
| min-width: 40px; | |
| } | |
| .add-button:active { | |
| background-color: #45a049; | |
| } | |
| .options-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin: 5px 0; | |
| } | |
| .option-button { | |
| padding: 6px 10px; | |
| margin: 3px; | |
| background-color: #7b1fa2; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| min-width: 60px; | |
| } | |
| .option-button.green { background-color: #4caf50; } | |
| .option-button.red { background-color: #d32f2f; } | |
| .option-button.gray { background-color: #616161; } | |
| .option-button:active { opacity: 0.9; } | |
| .selection-box { | |
| background-color: #e1f5fe; | |
| padding: 8px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| font-size: 12px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .selection-box span { | |
| background-color: #bbdefb; | |
| padding: 3px 8px; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| } | |
| .selected-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: #bbdefb; | |
| padding: 3px 8px; | |
| border-radius: 5px; | |
| font-size: 11px; | |
| } | |
| .selected-item-image { | |
| width: 25px; | |
| height: 25px; | |
| object-fit: cover; | |
| border-radius: 5px; | |
| margin-right: 5px; | |
| } | |
| .submit-button { | |
| padding: 6px 10px; | |
| background-color: #0288d1; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| min-width: 60px; | |
| } | |
| .submit-button:active { | |
| background-color: #0277bd; | |
| } | |
| .remove-button { | |
| padding: 3px 6px; | |
| margin-left: 5px; | |
| background-color: #d32f2f; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 10px; | |
| } | |
| .remove-button:active { | |
| background-color: #b71c1c; | |
| } | |
| .manual-input { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| width: 100px; | |
| } | |
| .quantity-input { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| width: 50px; | |
| } | |
| .order-name-input { | |
| padding: 4px; | |
| border: 1px solid #0288d1; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| width: 100px; | |
| } | |
| @media (max-width: 480px) { | |
| .chat-header { | |
| font-size: 14px; | |
| padding: 6px; | |
| } | |
| .chat-messages { | |
| padding: 3px; | |
| } | |
| .bot-message, .user-message { | |
| font-size: 11px; | |
| padding: 6px; | |
| margin: 3px 0; | |
| } | |
| .chat-input input { | |
| font-size: 11px; | |
| min-height: 30px; | |
| padding: 5px; | |
| } | |
| .chat-input button { | |
| font-size: 11px; | |
| min-height: 30px; | |
| padding: 5px 8px; | |
| min-width: 50px; | |
| } | |
| .items-grid { | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| gap: 6px; | |
| padding: 6px; | |
| } | |
| .item-card { | |
| width: 100%; | |
| flex: 0 0 auto; | |
| max-width: 120px; | |
| } | |
| .item-image { | |
| height: 80px; | |
| } | |
| .item-name { | |
| font-size: 10px; | |
| } | |
| .item-field, .item-description { | |
| font-size: 9px; | |
| } | |
| .show-button, .add-button { | |
| font-size: 9px; | |
| padding: 3px; | |
| min-width: 35px; | |
| } | |
| .options-container { | |
| gap: 3px; | |
| } | |
| .option-button { | |
| font-size: 11px; | |
| padding: 5px 8px; | |
| min-width: 50px; | |
| } | |
| .selection-box { | |
| padding: 6px; | |
| gap: 3px; | |
| } | |
| .selection-box span { | |
| font-size: 11px; | |
| padding: 2px 6px; | |
| } | |
| .selected-item { | |
| font-size: 10px; | |
| padding: 2px 6px; | |
| } | |
| .selected-item-image { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .submit-button { | |
| font-size: 11px; | |
| padding: 5px 8px; | |
| min-width: 50px; | |
| } | |
| .remove-button { | |
| font-size: 9px; | |
| padding: 2px 5px; | |
| } | |
| .manual-input, .order-name-input { | |
| width: 80px; | |
| font-size: 11px; | |
| padding: 3px; | |
| } | |
| .quantity-input { | |
| width: 40px; | |
| font-size: 11px; | |
| padding: 3px; | |
| } | |
| } | |
| @media (min-width: 481px) and (max-width: 768px) { | |
| .chat-header { | |
| font-size: 15px; | |
| } | |
| .chat-messages { | |
| padding: 4px; | |
| } | |
| .bot-message, .user-message { | |
| font-size: 12px; | |
| padding: 7px; | |
| } | |
| .chat-input input { | |
| font-size: 12px; | |
| min-height: 35px; | |
| } | |
| .chat-input button { | |
| font-size: 12px; | |
| min-height: 35px; | |
| padding: 6px 10px; | |
| } | |
| .items-grid { | |
| gap: 8px; | |
| } | |
| .item-card { | |
| flex: 0 0 140px; | |
| } | |
| .item-image { | |
| height: 90px; | |
| } | |
| .item-name { | |
| font-size: 11px; | |
| } | |
| .item-field, .item-description { | |
| font-size: 10px; | |
| } | |
| .show-button, .add-button { | |
| font-size: 10px; | |
| padding: 4px; | |
| min-width: 40px; | |
| } | |
| .option-button { | |
| font-size: 12px; | |
| padding: 6px 10px; | |
| } | |
| .selection-box { | |
| padding: 8px; | |
| gap: 5px; | |
| } | |
| .selection-box span { | |
| font-size: 12px; | |
| } | |
| .selected-item { | |
| font-size: 11px; | |
| } | |
| .selected-item-image { | |
| width: 25px; | |
| height: 25px; | |
| } | |
| .submit-button { | |
| font-size: 12px; | |
| padding: 6px 10px; | |
| } | |
| .remove-button { | |
| font-size: 10px; | |
| padding: 3px 6px; | |
| } | |
| .manual-input, .order-name-input { | |
| width: 100px; | |
| font-size: 12px; | |
| } | |
| .quantity-input { | |
| width: 50px; | |
| font-size: 12px; | |
| } | |
| } |