/* assets/css/customer.css */
body { background: #f0f4f8; }

.hero-section {
    background: linear-gradient(135deg, #0d6efd 0%, #0056d3 100%);
    padding: 20px 0 0;
}

.ticket-number-box {
    background: #f8f9ff;
    border: 2px dashed #0d6efd;
}

.ticket-number {
    letter-spacing: 2px;
    font-size: 1.6rem;
}

.card {
    border-radius: 12px;
}

.form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0056d3);
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13,110,253,0.35);
}

.input-group-text {
    background: #f8f9fa;
    color: #6c757d;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; display: inline-block; }

/* Track page */
.conversation-thread { max-height: 500px; overflow-y: auto; }
.msg-admin { background: #e8f4fd; border-left: 4px solid #0d6efd; }
.msg-customer { background: #f0fff4; border-left: 4px solid #28a745; }
.msg-internal { background: #fff3cd; border-left: 4px solid #ffc107; }